Skip to content

Latest commit

 

History

History
44 lines (35 loc) · 2.23 KB

interactions.md

File metadata and controls

44 lines (35 loc) · 2.23 KB

Interactions

Jet Admin's Component Designer allows you to add interactions to layers, enhancing user engagement and functionality. Five types of interactions can be added to any layer:

  1. Track Hover State:
    • Monitors the hover state of the layer, allowing you to change its appearance or behavior when a user hovers over it.
  2. Track Pressed State:
    • Detects when a layer is pressed or clicked, enabling you to modify its appearance or trigger specific actions.
  3. Click Action:
    • Defines an action to be performed when the layer is clicked, such as navigating to another page or executing a custom script.
  4. Cursor:
    • Customizes the cursor style when hovering over the layer, enhancing the user interface and experience.
  5. Text Selection:
    • Allows text layers to be selectable, enabling users to copy text from your application.

Usage Examples

  1. Hover State:
    • Change the background color of a button when a user hovers over it to provide visual feedback.
  2. Pressed State:
    • Trigger an effect when a button is pressed to simulate a realistic button press.
  3. Click Action:
    • Set up navigation to a detailed view when an image or item is clicked.
  4. Cursor:
    • Change the cursor to a pointer to indicate clickable elements or to a custom icon for specific interactions.
  5. Text Selection:
    • Enable users to copy text from informational panels or data tables for convenience.

Implementation

To add interactions in Jet Admin:

  1. Select the Layer:
    • Choose the layer you want to add an interaction to.
  2. Choose Interaction Type:
    • Click on the interaction menu and select the desired interaction type (e.g., Track Hover State).
  3. Configure Interaction:
    • Define the specific behavior or action for the interaction. For example, set the hover state to change the background color to a specific value.
  4. Apply and Test:
    • Apply the interaction settings and test them to ensure they work as intended.

{% @arcade/embed flowId="RiyaMWEzBwbikjAe3xyB" url="https://app.arcade.software/share/RiyaMWEzBwbikjAe3xyB" %}

By utilizing these interactions, you can create a more interactive and engaging user interface in Jet Admin, improving the overall user experience.