Tabs

Underlined tab bar for switching between views of the same content. Use size (xs, sm, md, lg, xl) to change density.

Import

Vue

import { UiTabs } from '@ziyarago/ui/vue'

Default

Vue

<UiTabs
  v-model="value"
  :items="[{ value: 'overview', label: 'Overview' }, { value: 'itinerary', label: 'Itinerary' }, { value: 'hotels', label: 'Hotels' }, { value: 'reviews', label: 'Reviews' }]"
 />

Sizes

Vue

<UiTabs
  v-model="value"
  :items="[{ value: 'overview', label: 'Overview' }, { value: 'itinerary', label: 'Itinerary' }, { value: 'hotels', label: 'Hotels' }]"
  size="xs"
 />

<UiTabs
  v-model="value"
  :items="[{ value: 'overview', label: 'Overview' }, { value: 'itinerary', label: 'Itinerary' }, { value: 'hotels', label: 'Hotels' }]"
  size="sm"
 />

<UiTabs
  v-model="value"
  :items="[{ value: 'overview', label: 'Overview' }, { value: 'itinerary', label: 'Itinerary' }, { value: 'hotels', label: 'Hotels' }]"
  size="md"
 />

<UiTabs
  v-model="value"
  :items="[{ value: 'overview', label: 'Overview' }, { value: 'itinerary', label: 'Itinerary' }, { value: 'hotels', label: 'Hotels' }]"
  size="lg"
 />

<UiTabs
  v-model="value"
  :items="[{ value: 'overview', label: 'Overview' }, { value: 'itinerary', label: 'Itinerary' }, { value: 'hotels', label: 'Hotels' }]"
  size="xl"
 />

API reference

Underlined tab strip for switching between views of the same page.

Props

PropType and valuesDefaultDescription

modelValuev-modelstring—Value of the selected tab. Vue v-model, React modelValue + onChange.

items{ value: string; label: string }[]'[]'Tabs.

sizexssmmdlgxl'md'Scale of tab height and text.

Events

Vue: @name. React: onName.

changeCalled with the value of the clicked tab.

Notes

Renders only the tab buttons (role="tablist"); you show the matching panel yourself.