Tabs
Composite Navigation draft Gen UI part Needs actionSwitch between 2 to 5 views of the same thing. Each tab has one panel.
Examples
HTML and CSS
Framework-free reference. Styles live in system/components/segmented-tabs.css and read only tokens. Wrap markup in .v-root.
Rendered markup of the anatomy example
Props and slots
The component API. Gen UI JSON uses these names, and the Flutter widget should mirror them.
Props
| Prop | Values | Default |
|---|---|---|
tabs * | array. Tab labels, 2 to 5 | |
selected | number | 0 |
action * | string. Action name, e.g. "plan.open" or "pay.share". The part before the dot is the action type. | |
payload | object |
* required.
Slot rules
children: Stack. One Stack per tab, in the same order.
In Gen UI
How VelioBot uses this part. The bot returns JSON; the validator checks it; the renderer draws it.
JSON node
Every node may also carry id, grow, attribution, privateOnly and fallbackText. Interactive: the node must carry an action, and taps emit { action, payload }.
Rules that name this part
card-children Card children: Image, Text, Stack, List, KeyValue, Tabs, MapSnippet, Progress, Divider, ActionRow.
tabs-count Tabs: 2 to 5, with one panel per tab.
Usage in recipes
0 of the original cards use it. Used by the new compositions only. Priority table