Section¶
The Section widget is a card with a title bar, a body and an optional footer. It groups related widgets under a heading, for example a "Revenue this quarter" card with a chart inside, or a "Contact details" card with a few text lines and a button in the footer. A row of sections can also work as a set of choices the visitor clicks.
See also Container for a plain box, Accordion for collapsible panels, and Tabs for panels shown one at a time.
Using it¶
Drop a Section onto the page, set its Title, and drag widgets into the body. Turn on Show footer if you want a row at the bottom for buttons or a note. The title can be a template, for example Orders for {$params.customer}.
Options¶
| Option | Values | Default | Description |
|---|---|---|---|
| Title | Any text or template | Section Title |
The heading in the title bar |
| Show header | On · Off | On | Whether the card has a title bar |
| Show footer | On · Off | Off | Whether the card has a footer row |
| Selection | See below | Off | Lets the whole card act as a clickable choice |
| Variant | Theme variants | Default | Picks the card's look from the theme. See Variants |
| Custom Style | CSS for Container, Header, Body, Footer | Empty | Extra styling per part. Header and Footer appear only while that row is shown |
| Box Style | Sizing and spacing | — | The box around the card |
Selection¶
A section can act as a clickable choice. This suits a row of plan cards where the visitor picks one, or a set of category cards that filter a table below.
| Option | Values | Default | Description |
|---|---|---|---|
| Enable | On · Off | Off | Makes the card clickable and stores which one is chosen |
| Mode | Single · Multiple | Single | Whether one card or several can be chosen at once |
| Selection | A state path | — | Where the chosen value is stored, for example $vars.chosenPlan. Cards that share the same path form one group |
| Key fields | Field names | id |
Which fields of the stored value identify a card |
| Key Value | Text or expression | — | This card's own value. Required. A fixed value such as category-a, or an expression such as {$record.categoryId} |
In Single mode, cards that share one path behave like radio buttons. Clicking one unselects the others, and ctrl-clicking the selected card clears the choice. In Multiple mode the path holds a list. A plain click replaces the selection, and ctrl-click adds or removes the clicked card.
Tips¶
A few things to keep in mind:
- The header, body and footer are slots. Each takes any widgets you drop into it.
- The title also names the widget in the page tree, so a templated title still reads sensibly while you design.