Reka UI 徽标Reka
backdrop
示例
组件

选项卡

一组分层的内容部分（也称为选项卡面板），每次显示一个。

在此处更改您的账户信息。完成后请点击保存。

特性

  • 可受控或不受控。
  • 支持水平/垂直方向。
  • 支持自动/手动激活。
  • 完整的键盘导航。

安装

从命令行安装此组件。

sh
$ npm add reka-ui

结构

导入所有部分并将其组合。

vue
<script setup>
import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
</script>

<template>
  <TabsRoot>
    <TabsList>
      <TabsIndicator />
      <TabsTrigger />
    </TabsList>
    <TabsContent />
  </TabsRoot>
</template>

API 参考

根

包含所有选项卡组件部分。

属性默认类型
activationMode
'自动'
'自动' | '手动'

选项卡是自动（聚焦时）还是手动（点击时）激活。

as
'div'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

defaultValue
字符串 | 数字

首次渲染时应激活的选项卡值。当您不需要控制选项卡状态时使用。

dir
'ltr' | 'rtl'

适用时，组合框的阅读方向。
如果省略，则全局继承自 ConfigProvider 或假定为 LTR（从左到右）阅读模式。

modelValue
字符串 | 数字

要激活的选项卡的受控值。可绑定为 v-model。

orientation
'水平'
'垂直' | '水平'

选项卡布局的方向。主要用于相应地进行箭头导航（左 & 右 vs. 上 & 下）。

unmountOnHide
true
布尔值

当 true 时，元素在关闭状态时将被卸载。

事件触发载荷
update:modelValue
[payload: StringOrNumber]

值改变时调用的事件处理程序

插槽（默认）载荷
modelValue
字符串 | 数字

当前输入值

数据属性值
[data-orientation]"垂直" | "水平"

列表

包含沿着活动内容边缘对齐的触发器。

属性默认类型
as
'div'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

loop
true
布尔值

当为 true 时，键盘导航将从最后一个选项卡循环到第一个，反之亦然。

数据属性值
[data-orientation]"垂直" | "水平"

触发器

激活其关联内容的按钮。

属性默认类型
as
'按钮'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

禁用
false
布尔值

当为 true 时，阻止用户与选项卡交互。

值*
字符串 | 数字

将触发器与内容关联的唯一值。

数据属性值
[data-state]"活动" | "非活动"
[data-disabled]禁用时存在
[data-orientation]"垂直" | "水平"

指示器

突出显示当前活动选项卡的指示器。

属性默认类型
as
'div'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

CSS 变量描述
--reka-tabs-indicator-size
指示器的大小。
--reka-tabs-indicator-position
指示器的位置。

内容

包含与每个触发器关联的内容。

提示
使用 Presence 组件构建 - 支持任何 动画技术，同时保持对 Presence 发出事件的访问。
属性默认类型
as
'div'
AsTag | Component

此组件应渲染为的元素或组件。可通过 asChild 覆盖。

asChild
布尔值

更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。

阅读我们的 组合指南了解更多详情。

forceMount
布尔值

当需要更多控制时，用于强制挂载。在与 Vue 动画库控制动画时很有用。

值*
字符串 | 数字

将内容与触发器关联的唯一值。

数据属性值
[data-state]"活动" | "非活动"
[data-orientation]"垂直" | "水平"

示例

垂直

您可以通过使用 orientation 属性创建垂直选项卡。

vue
<script setup>
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
</script>

<template>
  <TabsRoot
    default-value="tab1"
    orientation="vertical"
  >
    <TabsList aria-label="tabs example">
      <TabsTrigger value="tab1">
        One
      </TabsTrigger>
      <TabsTrigger value="tab2">
        Two
      </TabsTrigger>
      <TabsTrigger value="tab3">
        Three
      </TabsTrigger>
    </TabsList>
    <TabsContent value="tab1">
      Tab one content
    </TabsContent>
    <TabsContent value="tab2">
      Tab two content
    </TabsContent>
    <TabsContent value="tab3">
      Tab three content
    </TabsContent>
  </TabsRoot>
</template>

无障碍

遵循 选项卡 WAI-ARIA 设计模式。

键盘交互

键描述
Tab 键
当焦点移到选项卡时，聚焦活动触发器。当触发器被聚焦时，将焦点移到活动内容。
向下箭头键
根据 orientation 移动焦点到下一个触发器，并激活其关联内容。
向右箭头
根据 orientation 移动焦点到下一个触发器，并激活其关联内容。
向上箭头键
根据 orientation 移动焦点到上一个触发器，并激活其关联内容。
向左箭头
根据 orientation 移动焦点到上一个触发器，并激活其关联内容。
Home 键
将焦点移动到第一个触发器并激活其关联内容。
End 键
将焦点移动到最后一个触发器并激活其关联内容。