Vertical Divider
The Vertical Divider component creates a clear visual separation between two adjacent components by adding a vertical separator. It's commonly used to enhance layout structure, improve readability, and organize content by providing a distinct division between sections within a user interface.
Component Specific Actions (CSA)​
There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
Exposed Variables​
There are currently no exposed variables for the component.
Additional Actions​
Action | Description | Configuration Options |
|---|---|---|
| Visibility | Controls whether the divider is visible. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Tooltip | Provides additional information on hover. Supports Plain text, Markdown, and HTML formats. | String. |
Devices​
Devices | Description | Expected Value |
|---|---|---|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
Styles​
Property | Description | Configuration Options |
|---|---|---|
| Divider color | Sets the color of the divider. | Select the color or click on fx and input code that programmatically returns a color. Black (#000) switches to white in dark mode. |
| Style | Sets the line style of the divider. | Select Solid (default) or Dashed, or set it programmatically using fx. |
| Box Shadow | Adds shadow around the divider to create depth. | Accepts box-shadow values like none, 2px 4px 6px rgba(0, 0, 0, 0.1) |
| Padding | Sets the padding around the divider. | Select Default or None. |
info
Any property having the fx button next to its field can be programmatically configured.
Advanced​
Property | Description | Configuration Options |
|---|---|---|
| CSS class | Adds a custom CSS class to the component, which can be targeted using Custom Styles for advanced styling. | Enter one or more class names. |
info
The Advanced section is available only if your plan has the Custom Styles feature enabled.