Divider
The Divider component is used to add a separator between components.
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.
General
Tooltip
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
Under the General accordion, you can set the value as Plain text, Markdown, or HTML by selecting the desired format from the toggle above the field. Now hovering over the component will display the tooltip.
Layout
| Layout | 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 line. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Style | Sets the style of the divider line. | Select Solid or Dashed. |
| Label alignment | Sets the horizontal position of the label text on the divider. | Select Left, Center, or Right. |
| Label color | Sets the color of the label text. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Text wrap | Controls whether the label text wraps onto multiple lines or stays on a single line. When set to No wrap, text that exceeds the divider width is truncated with an ellipsis. | Select Wrap (default) or No wrap. |
| Visibility | Controls component visibility. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Box shadow | Sets the box shadow properties of the component. | Select the box shadow color and adjust related properties or set it programmatically using fx. |
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.