Tabs

Display a tab navigation.

Usage

We currently don't have support for anitems prop that would allow for slot based rendering of the content. For now, use the TabsContent import directly from the reka-ui package.

tab-1 
<script lang="ts" setup>
import { TabsContent } from 'reka-ui'

const activeTab = ref('tab1')
</script>

<template>
  <CTabs
    v-model="activeTab"
    class="flex flex-col gap-6"
  >
    <CTabsItem value="tab1">
      Virtual machines
    </CTabsItem>
    <CTabsItem value="tab2">
      Bare metal
    </CTabsItem>
    <template #content>
      <TabsContent value="tab1">
        tab-1
      </TabsContent>
      <TabsContent value="tab2">
        tab-2
      </TabsContent>
    </template>
  </CTabs>
</template>

Routed tabs

<script lang="ts" setup>
import { NuxtLink } from '#components'

const route = useRoute()
</script>

<template>
  <div>
    <CTabs
      :model-value="route.path"
      as="nav"
    >
      <CTabsItem
        :as="NuxtLink"
        to="/components/tabs"
        value="/components/tabs"
      >
        Tabs
      </CTabsItem>
      <CTabsItem
        :as="NuxtLink"
        value="/components/alert"
        to="/components/alert"
      >
        Alert
      </CTabsItem>
    </CTabs>
    <NuxtPage />
  </div>
</template>

Props

Tabs

modelValue
StringOrNumber
stringnumber
as
unknown
defaultValue
StringOrNumber
stringnumber
orientation
DataOrientation
"horizontal""vertical"
dir
Direction
"ltr""rtl"
activationMode
"automatic" | "manual"
unmountOnHide
boolean
asChild
boolean

TabsItem

valuerequired
StringOrNumber
stringnumber
as
unknown
disabled
boolean
asChild
boolean