Tabs¶
A tabbed container. Each tab is its own drop zone, and only the active one is shown.
Layout widgets · widget type tabs · binds through a data source, or text templates in labels
Related: Accordion · Section · Nav List
Options¶
| Option | Values | Default | Description |
|---|---|---|---|
| Data options | Key value · Data source | Key value | Whether you author the tab list by hand or generate it from data |
| Items | A list of tabs | Three tabs | Used in Key value mode — each tab has an id and a label |
| Data Source | An expression, e.g. {$data.categories} |
— | Used in Data source mode — the records that become tabs |
| Tab label | Text · Expression · HTML · Element | Text | How each tab's label is produced |
| Text template / Expression / HTML template | Template | — | The label itself, for the matching Tab label mode |
| Default tab | A tab id | First tab | Which tab is active on first render |
| Selection | A state path | — | Where the active tab's key is stored, in Data source mode |
| Scrollable | On · Off | Off | Whether the tab strip scrolls when it overflows |
| Bar Style / Item Style / Content Style | CSS | Empty | Styling per part |
| Box Style | Sizing and spacing | — | The box around the widget |
Notes¶
- Tabs generated from a data source show only the bar: since the set of tabs is dynamic, there are no fixed panels to fill. Wire the selection to a state path and let other widgets react to it
- In Key value mode each tab is a drop zone, so panels can hold any widgets