Products · Components
Tab
One tab in Tabs, with its label, and an optional icon and count badge.
Goes inside Tabs.
Children: Nothing
Example
Tab is used inside Tabs:
<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 | What the Tabs' onChange sends when the person chooses this tab. |
label | string | |
icon | icon name, or one of your own icons | Before the label, or over it in a bar. |
badge | number | A count shown next to the label, or on the corner of a bar tab's icon, such as unread items. |
disabled | boolean | Dims it, and the person can't use it. |
Events
None.