Skip to main content


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 NameHEX CodeRGB CodeRGBA Code
Black #000000rgb(0,0,0)rgba (0,0,0,1)
Green #008000rgb(0,128,0)rgba(0,128,0,1)
Red #FF0000rgb(255, 0, 0)rgba(255,0,0,1)
Blue #0000FFrgb(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.

  1. Create a Container component
  2. Add 4 Input components inside of the Container component and label them "Red", "Green", "Blue", "Opacity", respectively
  3. Set the background color of the Container component to rgba({{Input1.value}}, {{Input2.value}}, {{Input3.value}},{{Input4.value}})
  4. Create a Button component and label it "Reset"
  5. Set onClick to {{resetComponent('Container1', true)}}

Reset child components example

Container Properties

Component Properties

Background ColorChanges the color of the background, takes in HTML color names, HEX, RBG, or RGBA values
VisibleControls the visibility of the component, values are a boolean
Scroll ContentsEnable 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:

Container1.isVisibleReturns the boolean value of the component's visibility (True, if it is visible)
Container1.backgroundColorReturns a string from the Background Color property