Borders can be applied to layers. You can think of borders as the visual representation the layer boundaries.

To add a border, please follow the steps:

1. From the Right Sidebar, click on the Add button

2. Click on the Type of border, to change it

3. Select the type you want to apply

4. Click on the Color button, to change it

Create responsive components using Resizing. Resizing allows you to handle the positioning and sizing of user elements when the size of the canvas changes. You can apply resizing to Canvas or Element.

To resize the canvas, please follow the steps:

1. Click on the Canvas from the Left sidebar

The layout allows you to do the following operations:

• Adjusting Position (X and Y Coordinates)

• Modifying Width and Height

You can use the Auto Layout feature in Frames.

There are a couple of settings:

• Auto layout direction:

  • Horizontal layout

Shadows serve several purposes, from aesthetic to functional. They can enable you to signify that an element is interactive, like making a button look clickable by giving the layer a shadow to visually pop.

In Jet, shadows can be either outside, or inside. They can be a specific color and also have an alpha channel, and you can set a shadow location and blur.

Color can be selected via referencing a parameter.

To add a shadow, please follow the steps:

1. From the Right Sidebar, click on the Add Shadow button

2. Click to Color button to change the color of the shadow

3. Click on the X-axis to change it

4. Click on the Y-axis to change it

5. Click on the Blur button to change it

Paints are colors, gradients, or images. Fills are just one of the ways you can use paints in Jet.

Apply paints to text layers, or any vector object, this includes shapes, vector networks, and boolean groups. You can add, adjust, and remove fills in the Fill section of the right sidebar.

Fill types (plain, image, icon, linear gradient, radial gradient, angular gradient, diamond)

Color fill types can be set via formula and referenced from parameters. Press the "Color with Formula" button to set it up. It can be applied to plain colors and gradients.

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:

To add interactions in Jet Admin:

1. Select the Layer:

   • Choose the layer you want to add an interaction to.

2. Choose Interaction Type:

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

Conditional Visibility allows dynamic display adjustments of UI components or layers based on specified conditions. This feature is handy when you need UI elements to respond to changes, such as altering the color of a metric indicator depending on whether its value is positive or negative.

To practice the feature, let's build this example:

Let's go by colors one by one. For building the green part, please follow the steps:

1. Click on the Add Fill button from the Right Sidebar

2. Click on the Color button to change the color

3. Click on the Conditional Fill button

4. From the Component Parameters choose the right parameter

5. Set the condition of the parameter > 0

For building the red part, please follow the steps:

1. Click on the Add Fill button from the Right Sidebar to add the second fill

2. Click on the Color button to change the color

3. Click on the Conditional Fill

Component Property Visibility allows you to apply conditions to Fills, Borders, and Shadows based on conditions.

Component Conditional Visibility allows you to show/hide the element (text, shapes, images) on the Component Designer.