Tabs

标签页,基于 reka-ui 封装并完整转发 props/emits。Tabs 是 TabsRoot 的别名。

Anatomy

• Tabs标签页根 (TabsRoot 别名),承载 modelValue / orientation 等状态
  • TabsList标签容器,默认样式 flex items-center justify-center
  • TabsTrigger单个标签触发器,必须传 value
  • TabsContent与 Trigger 按 value 配对的面板

激活态样式

TabsTrigger 和 TabsContent 会自动带 data-state="active" | "inactive",可用 UnoCSS 写法如 data-[state=active]:bg-white data-[state=active]:text-black 自定义高亮。

基本用法

受控切换

通过 v-model 绑定当前 tab。

概览面板内容

<script setup lang="ts">
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tripo3d/design';
import { ref } from 'vue';

const tab = ref('overview');
</script>

<template>
  <Tabs v-model="tab" class="w-80">
    <TabsList class="gap-2 rounded-2 bg-gray-4 p-1">
      <TabsTrigger
        class="h-8 flex-1 rounded-2 text-sm text-white-60 data-[state=active]:bg-gray-2 data-[state=active]:text-white"
        value="overview"
      >
        概览
      </TabsTrigger>
      <TabsTrigger
        class="h-8 flex-1 rounded-2 text-sm text-white-60 data-[state=active]:bg-gray-2 data-[state=active]:text-white"
        value="detail"
      >
        详情
      </TabsTrigger>
    </TabsList>
    <TabsContent value="overview" class="mt-3 p-3">概览面板内容</TabsContent>
    <TabsContent value="detail" class="mt-3 p-3">详情面板内容</TabsContent>
  </Tabs>
</template>

非受控默认值

defaultValue

首次渲染的激活项。

A 的内容

<Tabs default-value="a">
  <TabsList>
    <TabsTrigger value="a">Tab A</TabsTrigger>
    <TabsTrigger value="b">Tab B</TabsTrigger>
  </TabsList>
  <TabsContent value="a">A 的内容</TabsContent>
  <TabsContent value="b">B 的内容</TabsContent>
</Tabs>

禁用某个 Tab

disabled trigger

A

<TabsTrigger disabled value="b">禁用</TabsTrigger>

API

Tabs Props

名称	类型	默认值	说明
modelValue	string	—	受控激活值
defaultValue	string	—	非受控初始值
orientation	'horizontal' | 'vertical'	'horizontal'	排列方向
activationMode	'automatic' | 'manual'	'automatic'	键盘聚焦时是否立即切换

其余 props 透传至 reka-ui TabsRootProps。

Tabs Events

事件	Payload	说明
update:modelValue	(value: string)	激活值变化

TabsList Props

名称	类型	默认值	说明
class	string	—	容器额外 class;默认含 flex items-center justify-center

其余 props 透传至 reka-ui TabsListProps。

TabsTrigger Props

名称	类型	默认值	说明
value	string	—	与 TabsContent 配对的值(必填)
disabled	boolean	—	禁用此标签
class	string	—	触发器 class

TabsContent Props

名称	类型	默认值	说明
value	string	—	对应 Trigger 的值(必填)
class	string	—	面板 class

Slots

插槽	作用域	说明
default (Tabs)	—	通常放 TabsList + 多个 TabsContent
default (TabsList)	—	若干 TabsTrigger
default (TabsTrigger)	—	标签内容(文字 / 图标)
default (TabsContent)	—	面板内容

可访问性

• 基于 reka-ui,TabsList 带 role="tablist",TabsTrigger 带 role="tab"、aria-selected、data-state
• 支持 Left/Right(或 Up/Down)、Home/End 的原生键盘导航
• TabsContent 带 role="tabpanel" 并与对应触发器通过 aria-controls 关联
• activationMode="manual" 可在需要延迟加载的场景下按 Enter 再切换