mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 22:17:55 +00:00
59 lines
2 KiB
Markdown
59 lines
2 KiB
Markdown
---
|
|
id: divider
|
|
title: Divider
|
|
---
|
|
|
|
The **Divider** component is used to add a separator between components.
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## Component Specific Actions (CSA)
|
|
|
|
There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## Exposed variables
|
|
|
|
There are currently no exposed variables for the component.
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## 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 <b>General</b> accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## 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. |
|
|
|
|
</div>
|
|
|
|
---
|
|
|
|
<div style={{paddingTop:'24px'}}>
|
|
|
|
## 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 HEX color code. |
|
|
| Visibility | Controls component visibility. Toggle or set dynamically. | 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**. |
|
|
|
|
</div>
|