Tabs

Last updated

2026-10-04 UTC

Demo

tabs/demo.vue

Cloud: a little sky for YunLeFun.

<script setup lang="ts">
import { ref } from 'vue'

const tab = ref('cloud')
const items = [
  { label: 'Cloud', value: 'cloud' },
  { label: 'Fun', value: 'fun' },
  { label: 'Studio', value: 'studio' },
]
</script>

<template>
  <YlfTabs v-model="tab" :items="items">
    <template #cloud>
      <p class="m-0 text-sm">
        Cloud: a little sky for YunLeFun.
      </p>
    </template>
    <template #fun>
      <p class="m-0 text-sm">
        Fun: colorful, cheerful and confident.
      </p>
    </template>
    <template #studio>
      <p class="m-0 text-sm">
        Studio: one shared component workshop.
      </p>
    </template>
  </YlfTabs>
</template>

Tabs use Reka UI for arrow/Home/End keyboard navigation and roving focus. Tokens define the indicator and appearance.

Props

Prop	Description	Type	Default
v-model	Current tab	string	—
items	Tabs { label, value, disabled? }	TabItem[]	—
orientation	Side / orientation	horizontal | vertical	horizontal

Slots

Provide each panel with a slot named after its value, such as cloud or fun.

Readonly items are supported. Reka manages tab/panel ARIA associations. Arrows and Home/End move focus and select automatically, skipping disabled items. Use Segmented Control for filters without associated panels.