Tabs 标签页

在同一区域切换多组内容。

命令行安装

npx @loongship-kit/ui add tabs

组件结构

角色	组件	职责	使用条件
根组件	Tabs	管理激活值和键盘导航	必需
标签列表	TabsList	组织一组标签触发器	必需
标签触发器	TabsTrigger	切换并关联对应内容	必需
内容面板	TabsContent	展示当前标签对应的内容	必需

基础用法

Vessel overview content.

查看代码

<template>
  <Tabs default-value="overview">
    <TabsList>
      <TabsTrigger value="overview">Overview</TabsTrigger>
      <TabsTrigger value="voyage">Voyage</TabsTrigger>
      <TabsTrigger value="disabled" disabled>Disabled</TabsTrigger>
    </TabsList>
    <TabsContent value="overview">Vessel overview content.</TabsContent>
    <TabsContent value="voyage">Current voyage content.</TabsContent>
  </Tabs>
</template>

受控状态

Vessel overview content.

Active: overview

查看代码

<template>
  <div class="vp-demo-showcase-column">
    <Tabs v-model="activeTab" class="vp-demo-control">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="voyage">Voyage</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Vessel overview content.</TabsContent>
      <TabsContent value="voyage">Current voyage content.</TabsContent>
    </Tabs>
    <span>Active: {{ activeTab }}</span>
  </div>
</template>

垂直和手动激活

Overview content.

查看代码

<template>
  <Tabs
    default-value="overview"
    orientation="vertical"
    activation-mode="manual"
    class="vp-demo-control"
  >
    <TabsList>
      <TabsTrigger value="overview">Overview</TabsTrigger>
      <TabsTrigger value="voyage">Voyage</TabsTrigger>
      <TabsTrigger value="history">History</TabsTrigger>
    </TabsList>
    <TabsContent value="overview">Overview content.</TabsContent>
    <TabsContent value="voyage">Voyage content.</TabsContent>
    <TabsContent value="history">History content.</TabsContent>
  </Tabs>
</template>

手动激活的键盘行为

activation-mode="manual" 时，方向键只移动焦点，需要按 Enter 或 Space 激活标签。

API

Tabs（主组件）

属性

属性	类型	默认值	说明
v-model	string | number	-	当前激活值
defaultValue	string | number	-	非受控模式的初始值
orientation	'horizontal' | 'vertical'	'horizontal'	排列方向和方向键导航方式
activationMode	'automatic' | 'manual'	'automatic'	聚焦后自动激活或手动确认
dir	'ltr' | 'rtl'	'ltr'	阅读方向
unmountOnHide	boolean	true	隐藏时是否卸载内容
as	string | Component	'div'	渲染元素
asChild	boolean	false	合并到唯一子元素
class	ClassValue	-	自定义类名

事件

事件	参数	说明
update:modelValue	value: string | number	激活值改变时触发

插槽

插槽	参数	说明
default	—	放置 TabsList 和 TabsContent

子组件

TabsList — 标签触发器列表

属性

属性	类型	默认值	说明
loop	boolean	true	方向键导航是否首尾循环
as	string | Component	'div'	渲染元素
asChild	boolean	false	合并到唯一子元素
class	ClassValue	-	自定义类名

插槽

插槽	参数	说明
default	—	放置 TabsTrigger

TabsTrigger — 标签触发器

属性

属性	类型	默认值	说明
value	string | number	-	关联内容的唯一值，必填
disabled	boolean	false	是否禁用
as	string | Component	'button'	渲染元素
asChild	boolean	false	合并到唯一子元素
class	ClassValue	-	自定义类名

插槽

插槽	参数	说明
default	—	标签文本

TabsContent — 标签内容面板

属性

属性	类型	默认值	说明
value	string | number	-	关联触发器的唯一值，必填
forceMount	boolean	false	未激活时仍挂载内容
as	string | Component	'div'	渲染元素
asChild	boolean	false	合并到唯一子元素
class	ClassValue	-	自定义类名

插槽

插槽	参数	说明
default	—	标签页内容