The container component is a component that groups and holds other components. Other components can be dragged into a container component.
Container component properties
Selecting the component shows its configurable properties.
Display |
|
Show header | Toggle the visibility of the area above the container which holds the Title and icon. |
Title | Text to identify the component. The title will show in the header if the header is visible. |
Show icon | Toggle the visibility of an icon. Shown in the header if the header is visible. |
Icon | Select an icon from the provided list of icons. |
Default state | The default state of the component (Regular/Hidden/Disabled). |
Layout |
|
Display |
|
Height |
A container placed inside a Flex container also has a Fill option. Fill isn't available while the parent container's Height is set to Auto. |
Styles |
|
Background color | Choose between White | Fog | Silver |
Border | Toggle the visibility of a border around the container. |
Drop shadow | Toggle the visibility of a drop shadow on the border, if the border is visible. |
Layout - Flex
When the container is set to flex, components placed will automatically adjust to fit the container.
Layout |
|
Direction | Sets whether items are laid out in a row (left to right) or a column (top to bottom). |
Distribute | Sets where items sit along the direction: at the start, in the center, at the end, or spread out evenly. |
Alignment | Sets how items line up with each other across the direction: top, center, bottom, or along their text baseline. |
Gap | Sets the space between items, in pixels. |
Allow wrapping | Moves items onto a new line when they don't fit in one row or column. |