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.
Container background color
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
A Custom plugin is available here if you wish to tabs in your app screen!
Updated 6 months ago