Container
Containers are used to group components together. You can move a group of related components inside a container for better organization of your UI elements.
Certain components, namely Calendar and Kanban, are restricted from being placed within the Container component.
Show header​
The show header toggle can be used to display or hide a header for the component. If you keep the toggle on, the container will display a header on which you can place other components. The styling of the header can be controlled separately under the Styles tab.
Component Specific Actions (CSA)​
Following actions of component can be controlled using the component specific actions(CSA):
Action | Description | How To Access |
|---|---|---|
| setVisibility() | Sets the visibility of the component. | Employ a RunJS query (for e.g., await components.container1.setVisibility(false)) or trigger it using an event. |
| setLoading() | Sets the loading state of the component. | Employ a RunJS query (for e.g., await components.container1.setLoading(true)) or trigger it using an event. |
| setDisable() | Disables the component. | Employ a RunJS query (for e.g., await components.container1.setDisable(true)) or trigger it using an event. |
Exposed Variables​
| Variable | Description | How To Access |
|---|---|---|
isLoading | Indicates if the component is loading. | Accessible dynamically with JS (for e.g., {{components.container1.isLoading}}). |
isVisible | Indicates if the component is visible. | Accessible dynamically with JS (for e.g., {{components.container1.isVisible}}). |
isDisabled | Indicates if the component is disabled. | Accessible dynamically with JS (for e.g., {{components.container1.isDisabled}}). |
Tooltip​
You can add a Tooltip to the component in string format. Once you pass a value in the tooltip input, hovering over the component will display the value on the right.
Additional Actions​
Action | Description | Configuration Options |
|---|---|---|
| Loading state | Enables a loading spinner, often used with the isLoading property to indicate progress. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Visibility | Controls component visibility. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Disable | Enables or disables the component. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
Devices​
Property | 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 |
|---|---|---|
| Background | Sets the background color of the container. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Header | Sets the background color of the header. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Header height | Sets the height of the header within the component. | Enter a number or click on fx and input a number programmatically using code. |
| Border radius | Sets the radius of the component. | Enter a number or click on fx and input a number programmatically using code. |
| Border color | Sets the color of the border. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Box shadow | Sets the box shadow properties of the component. | Select the box shadow color and adjust the related properties or set it programmatically using fx. |