Section¶
A card with a title, a body and an optional footer.
Layout widgets · widget type section · binds through text templates in the title
Related: Container · Accordion · Tabs
Options¶
| Option | Values | Default | Description |
|---|---|---|---|
| Title | Any text or template | Section Title |
The section heading |
| Show header | On · Off | On | Whether the header row exists at all |
| Show footer | On · Off | Off | Whether the footer row exists at all |
| Section Style | Theme variants | Card | Picks the look from the theme; card gives the bordered card |
| Selection | See below | Off | Lets the whole section act as a selectable item |
| Header / Body / Footer style | CSS | Empty | Styling per slot |
| Box Style | Sizing and spacing | — | The box around the section |
Selection¶
A section can behave like a selectable panel — useful for a row of cards where one is chosen.
| Option | Values | Default | Description |
|---|---|---|---|
| Enabled | On · Off | Off | Turns the section into a selection reader and writer |
| Mode | Single · Multiple | Single | Whether several sections sharing a path can be selected together |
| Path | A state path | — | Where the selection is stored, e.g. $vars.chosenPlan |
| Value | Literal or expression | — | This section's own key. A literal like category-a, or an expression such as {$record.categoryId} |
In single mode, several sections sharing one path behave like radio buttons — clicking one deselects the others, and ctrl-clicking the selected one clears it. In multiple mode the path holds an array, a plain click replaces the selection, and ctrl-click adds or removes this section.
Notes¶
- Header, body and footer are slots — each takes any widgets you drop into it
- The title feeds the widget's label in the page tree, so a templated title still reads sensibly while designing