Products · Components
Tabs
A row of tabs, where one is chosen at a time.
Put a Tab inside it for each tab. Tabs only choose: show each tab's content yourself, with an <If>.
Children: Components
Example
<Tabs value="{{ tab }}" variant="segmented" onChange="setTab">
<Tab value="all" label="All" />
<Tab value="sent" label="Sent" />
<Tab value="received" label="Received" badge="3" />
</Tabs>export default definePage({
initialState: { tab: 'all' },
mutations: {
setTab: (_state, event: ValueEvent) => ({ tab: event.detail.value }),
},
});Props
| Prop | Type | What it is |
|---|---|---|
value | string | The chosen tab's value. |
variant | underline, segmented, bar | underline marks the chosen tab with a line. segmented fills it in, in a rounded track. bar shares the width equally, with each icon over its label, for a page's navigation. Default: underline. |
padding, paddingTop, paddingStart, paddingEnd, paddingBottom | spacing | Space inside its edges, all round or on one side. |
Events
| Event | Sends | Notes |
|---|---|---|
onChange | { value } in detail | The chosen tab's value. |