Tabs

te-tabs switches between panels. Titles can be plain strings or objects.

Basic

Content of the first tab.

Content of the second tab.

Content of the third tab.

<te-tabs v-model="tab" :titles="['First', 'Second', 'Third']">
  <template #tab-1>Content of the first tab.</template>
  <template #tab-2>Content of the second tab.</template>
  <template #tab-3>Content of the third tab.</template>
</te-tabs>

Pills, filled and disabled titles

First panel.

Second panel.

<te-tabs v-model="tab" pills filled :titles="[{ label: 'One' }, { label: 'Two', disabled: true }]">
  <template #tab-1>First panel.</template>
  <template #tab-2>Second panel.</template>
</te-tabs>

With a notification badge

notification takes the props of te-notification.

• 3

Three new messages.

Nothing here.

<te-tabs v-model="tab" :titles="[{ label: 'Inbox', notification: { text: '3', color: 'danger' } }, 'Archive']">
  <template #tab-1>Three new messages.</template>
  <template #tab-2>Nothing here.</template>
</te-tabs>

TabTitle

interface TabTitle {
  label?: string;
  disabled?: boolean;
  notification?: Record<string, unknown>;  // props for te-notification
}

Keyboard

The tablist is a single stop in the tab order: Tab reaches the selected tab, and the arrows move between them. Disabled tabs are skipped, and the selection follows the focus.

Key	Does
← →	Previous / next tab. ↑ ↓ when vertical.
Home End	First / last tab.
Tab	Out of the tablist and into the panel.

Props

Prop	Type	Default	Description
modelValue	number	0	Index of the open tab. Supports v-model.
titles	`(TabTitle	string)[]`	— (required)
pills	boolean	false	Pill styling instead of an underline.
filled	boolean	false	Titles share the full width.
vertical	boolean	false	Titles on the left, panels on the right.

Events

Event	Payload	Description
update:modelValue	number	The open tab changed.

Slots

Slot	Props	Description
tab-N	—	Panel content, starting at tab-1.