Container
Use a container component to cluster other components together
Background colors
Background Color of the Container component can take in HTML color names, HEX, RGB, and RGBA codes. See the below chart for a quick example, please note this list is not exhaustive and all color codes are supported:
| HTML Color Name | HEX Code | RGB Code | RGBA Code |
|---|---|---|---|
| Black | #000000 | rgb(0,0,0) | rgba (0,0,0,1) |
| Green | #008000 | rgb(0,128,0) | rgba(0,128,0,1) |
| Red | #FF0000 | rgb(255, 0, 0) | rgba(255,0,0,1) |
| Blue | #0000FF | rgb(0, 0, 255) | rgba(0,0,255,1) |
Reset all child components
Container components can be used to create a parent/child relationship with other components inside the container for easy management. For example, you can leverage the resetComponent() function to reset all child components to their default state.
- Create a Container component
- Add 4 Input components inside of the Container component and label them "Red", "Green", "Blue", "Opacity", respectively
- Set the background color of the Container component to
rgba({{Input1.value}}, {{Input2.value}}, {{Input3.value}},{{Input4.value}}) - Create a Button component and label it "Reset"
- Set onClick to
{{resetComponent('Container1', true)}}
Container Properties
Component Properties
| Property | Description |
|---|---|
| Background Color | Changes the color of the background, takes in HTML color names, HEX, RBG, or RGBA values |
| Visible | Controls the visibility of the component, values are a boolean |
| Scroll Contents | Enable scrollability within the container component |
Reference Properties
Properties can be accessed from other frontend components and backend APIs by adding the name of the Container, and dot referencing the property. For a Container named Container1:
| Property | Description |
|---|---|
Container1.isVisible | Returns the boolean value of the component's visibility (True, if it is visible) |
Container1.backgroundColor | Returns a string from the Background Color property |