Tabs - 标签页

更新日期

2026-10-04 UTC

Demo

tabs/demo.vue

云：一片属于云乐坊的天空。

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

const tab = ref('cloud')
const items = [
  { label: '云', value: 'cloud' },
  { label: '乐', value: 'fun' },
  { label: '坊', value: 'studio' },
]
</script>

<template>
  <YlfTabs v-model="tab" :items="items">
    <template #cloud>
      <p class="m-0 text-sm">
        云：一片属于云乐坊的天空。
      </p>
    </template>
    <template #fun>
      <p class="m-0 text-sm">
        乐：缤纷多彩，明快而笃定。
      </p>
    </template>
    <template #studio>
      <p class="m-0 text-sm">
        坊：一套统一的组件工坊。
      </p>
    </template>
  </YlfTabs>
</template>

标签页：键盘导航（方向键 / Home / End）、roving focus 基于 reka-ui，滑动指示条与外观走 token。

Props

属性	说明	类型	默认值
v-model	当前标签	string	—
items	标签项 { label, value, disabled? }	TabItem[]	—
orientation	方向	horizontal | vertical	horizontal

Slots

每个标签的内容用 value 同名插槽提供，如 #cloud、#fun。

items 支持只读数组。标签和内容面板的 ARIA 关联由 Reka UI 管理；方向键、Home / End 改变焦点并自动选中，跳过禁用项。切换普通筛选条件而不展示关联面板时使用 Segmented Control。