Group components with containers and slots
Build sections, stacks, grids, split panes, and tabbed layouts.
Containers arrange related components as a group. They let you build a section with a title, a row of controls, a structured grid, a resizable document/detail pair, or tabbed views without making the app one undifferentiated canvas.
Choose a container
| Container | Slots | Arrangement |
|---|---|---|
| Section | body | A column beneath an optional, collapsible title. |
| Stack | body | A row or column. |
| Grid | body | One to twelve column tracks; child span determines width. |
| Split | first, second | Two resizable panes, horizontal or vertical. |
| Tabs | One per tab id | One child group displayed at a time. |
Insert the container, then use Outline to move components into its slot. Canvas and Preview show the resulting structure. A nested component inherits the region of its container's root.
Nesting rules
A parent must exist and must be a container that declares the chosen slot. A component cannot contain itself or create a cycle. Container nesting is limited to four levels. Child order within a slot follows the definition's component order.
Moving a container moves its subtree. Deleting it removes that subtree; one Undo restores it. If a child needs a different region, move it to the top level first.
Splits and tabs
For Split, choose orientation, initial ratio, minimum pane shares, and an appropriate height. Vertically stacked panes need a definite height for their proportions to work. Users can drag the separator, use arrows along its axis, or reset the split with the documented keyboard gesture.
For Tabs, give each tab a stable id and visible label. The id is the slot referenced by children; changing it requires moving or updating those child slot references. Invalid or unknown active-tab state settles on the first available tab.
Compatibility and migration
Containers require a supporting engine. The older section-title property still renders where documented, but new layouts should use a Section container. An engine or template migration must preserve valid parent references; forcing a change cannot make a broken tree valid.