Tabs¶
The Tabs widget shows a row of tabs with one panel visible at a time. Use it to split a busy page into views the visitor switches between, such as Summary, Invoices and Documents on a customer page. Tabs can also be built from data, in which case they act as a selector that other widgets react to.
See also Accordion for stacked panels, Section for a single card, and Nav List for navigation between pages.
Using it¶
Drop a Tabs widget onto the page. It starts with three tabs. Rename them under Items, add more with Add tab, and drag widgets into each tab's panel. Pick the Default tab that should be open when the page loads.
To build the tabs from data, set Source to Data Source and point Data Source at the records, for example {$data.regions}. Tabs made this way have no panels. Instead, set Selection to a state path such as $vars.region, and let a table or chart below read the active tab from there. See Page and Portal State.
Options¶
| Option | Values | Default | Description |
|---|---|---|---|
| Source | Key-Values · Data Source | Key-Values | Whether you type the tabs by hand or build them from data |
| Items | A list of tabs | Three tabs | Used in Key-Values mode. Each tab has an id and a label. Add more with Add tab. The last remaining tab cannot be deleted |
| Data Source | An expression, for example {$data.items} |
— | Used in Data Source mode: the records that become tabs |
| Default tab | A tab | First tab | Which tab is active when the page loads. In Key-Values mode you pick from the list. In Data Source mode you type the tab's id |
| Tab label | Text · Expression · HTML · Element | Text | How each tab's label is produced. Element is offered only in Data Source mode |
| Text template / Expression / HTML template | Template | {$record.label} |
The label itself, for the matching Tab label mode |
| Scrollable tabs | On · Off | On | Whether the tab strip scrolls when there are too many tabs to fit |
| Hide tab content | On · Off | Off | Shows only the tab bar, without the panels. Not available in Data Source mode, which never has panels |
| Selection | A state path, for example $vars.activeTab, and Key fields |
Empty | Where the active tab is stored. Always on, and always a single tab |
| Custom Style | CSS for Bar, Content, Items | Empty | Extra styling per part. Content is hidden while Hide tab content is on |
| Box Style | Sizing and spacing | — | The box around the widget |
Tips¶
A few things to keep in mind:
- Tabs built from a data source show only the bar. The set of tabs changes with the data, so there are no fixed panels to fill. Store the active tab in a state path and let other widgets react to it.
- In Key-Values mode each tab's panel takes any widgets you drop into it.