A Container is a
div with pre-defined styles. They are the building blocks of your application and critical for responsive design. Containers are used to structure your application and layout other components/elements in a structured way. You can use flexbox to layout the items within your container.
Budibase containers use flexbox to layout components. A great resource for learning flexbox is flexbox froggy.
There are several general settings for the container component, most of which are shared with other components as well.
|Name||Change the name of your component, and how it reads within the component tree.|
|Direction||Change the direction of the components nested within your container. You can layout your components in a row (→) or a column (↓).|
|Horizontal align||The horizontal. align setting is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is left which will line the items up at the start edge of the container, but you could also set the value to right to line them up at the end, or center to line them up in the center.|
You can also use the value stretch to take all the spare space between the items, and share it out evenly between the items so there will be an equal amount of space between each item.
|Vertical align||The vertical align property will align the items on the cross axis. The initial value is top which aligns the items along the top of the container (like they're handing from a roof), but you could also set the value to the bottom to align the items along the bottom (like they're standing on the floor), or middle to line them up in the center.|
You can also use the value to stretch, to stretch the items to fill the height of the container.
|Size||Where the grow option deals with adding space in the main axis, the shrink property controls how it is taken away.|
|Gap||The gap property sets the gaps (gutters) between items stored within a container. You can select the different sizes of gaps you would like between your items.|
|Wrap||Select the wrap to wrap your components onto multiple lines. This is critical when designing for mobile resolutions.|
With nowrap, the items are laid out in a single line which may cause the flex container to overflow.
By defining actions within the
On Click setting, the container will be treated like a button including the cursor change. Any click events of buttons or other containers within a container with On Click actions set will be ignored.
You can also splash some color into your apps with containers!
To clear the selected color, click on the
X in the bottom right of the panel.
For additional flare, there are a range of gradients available.
You can also add background colors to your Screens
When using containers to layout your components, the most important setting is Direction as this will determine the flow of components. Even the Screen can set a layout direction.
If you need additional layout you can add containers. For example what if we wanted to group 'THREE' and 'FOUR' in column direction, but have an overall row layout for the screen. In this case we need to add a container and nest P3 and P4 like so:
Containers are the most flexible way to layout your components in the Design section, and you can nest any number of containers with different styles and layout options.
Updated 4 months ago