ITabs ​

Switches between panels on the same page. Items come from an array, and the indicator animates between triggers.

<ITabs v-model="tab" :items="['Overview', 'Line items', 'History']" />

A string item becomes both the label and the value. Pass objects when the two differ, or when an item needs an icon or should be disabled.

Variants ​

solid sits the active tab on a filled pill; line underlines it, which suits tabs sitting directly above the content they switch.

<ITabs v-model="tab" :items="items" variant="solid" />
<ITabs v-model="tab" :items="items" variant="line" />

Panels ​

Give each item a value and fill the matching named slot. Each slot receives the item it belongs to.

<script setup lang="ts">
const items = [
  { label: 'Overview', value: 'overview' },
  { label: 'Line items', value: 'items' },
  { label: 'History', value: 'history' },
]
</script>

<template>
  <ITabs v-model="tab" :items="items">
    <template #overview>
      <p>Four line items totalling €1,240.00.</p>
    </template>
    <template #items="{ item }">
      <p>Panel for {{ item.label }}.</p>
    </template>
  </ITabs>
</template>

Vertical ​

orientation="vertical" stacks the triggers down the side, and arrow-key navigation follows the orientation.

<ITabs v-model="tab" :items="items" orientation="vertical" variant="line" />

Keeping panels mounted ​

By default only the active panel is in the DOM. keepMounted renders them all and hides the inactive ones, which keeps form state, scroll position and anything expensive to rebuild.

<ITabs v-model="tab" :items="items" keep-mounted />

Props ​

The model is the active item's value, falling back to its label.

interface TabsItem {
  label: string
  /** Identifies the tab. Defaults to the label. */
  value?: string
  icon?: IconLike
  disabled?: boolean
}

Slots ​

For switching between pages rather than panels, use INavigationMenu or plain links.