选项卡

一组分层内容区域（称为选项卡面板），每次仅显示一个。

View code

Make changes to your account here. Click save when you're done.

Name

Username

特性

支持受控与非受控模式
支持水平/垂直方向
支持自动/手动激活
完整键盘导航支持

安装

通过命令行安装该组件。

$ 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 参考

Root

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

Prop	Default	Type
`activationMode`	`'automatic'`	`'automatic' \| 'manual'` Whether a tab is activated automatically (on focus) or manually (on click).
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`defaultValue`		`string \| number` The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs
`dir`		`'ltr' \| 'rtl'` The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`modelValue`		`string \| number` The controlled value of the tab to activate. Can be bind as `v-model`.
`orientation`	`'horizontal'`	`'vertical' \| 'horizontal'` The orientation the tabs are laid out. Mainly so arrow navigation is done accordingly (left & right vs. up & down)
`unmountOnHide`	`true`	`boolean` When `true`, the element will be unmounted on closed state.

Emit	Payload
`update:modelValue`	`[payload: StringOrNumber]` Event handler called when the value changes

Slots (default)	Payload
`modelValue`	`string \| number` Current input values

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`

List

包含与活动内容边缘对齐的触发器集合。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`loop`	`true`	`boolean` When `true`, keyboard navigation will loop from last tab to first, and vice versa.

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`

Trigger

激活其关联内容的按钮。

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`	`false`	`boolean` When `true`, prevents the user from interacting with the tab.
`value*`		`string \| number` A unique value that associates the trigger with a content.

Data Attribute	Value
`[data-state]`	`"active" \| "inactive"`
`[data-disabled]`	禁用时呈现
`[data-orientation]`	`"vertical" \| "horizontal"`

Indicator

高亮当前活动选项卡的指示器。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

CSS Variable	Description
`--reka-tabs-indicator-size`	指示器的尺寸
`--reka-tabs-indicator-position`	指示器的位置

Content

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

tip

Built with Presence component - supports any animation techniques while maintaining access to presence emitted events.

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`forceMount`		`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
`value*`		`string \| number` A unique value that associates the content with a trigger.

Data Attribute	Value
`[data-state]`	`"active" \| "inactive"`
`[data-orientation]`	`"vertical" \| "horizontal"`

示例

垂直布局

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

vue

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

<template>
  <TabsRoot
    default-value="tab1"
    orientation="vertical"
  >
    <TabsList aria-label="选项卡示例">
      <TabsTrigger value="tab1">
        第一项
      </TabsTrigger>
      <TabsTrigger value="tab2">
        第二项
      </TabsTrigger>
      <TabsTrigger value="tab3">
        第三项
      </TabsTrigger>
    </TabsList>
    <TabsContent value="tab1">
      第一个选项卡内容
    </TabsContent>
    <TabsContent value="tab2">
      第二个选项卡内容
    </TabsContent>
    <TabsContent value="tab3">
      第三个选项卡内容
    </TabsContent>
  </TabsRoot>
</template>

无障碍访问

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

键盘交互

Key	Description
`Tab`	焦点移入选项卡时，聚焦活动触发器。当触发器获得焦点时，将焦点移至活动内容
`ArrowDown`	根据 `orientation` 将焦点移至下一个触发器并激活其关联内容
`ArrowRight`	根据 `orientation` 将焦点移至下一个触发器并激活其关联内容
`ArrowUp`	根据 `orientation` 将焦点移至上一个触发器并激活其关联内容
`ArrowLeft`	根据 `orientation` 将焦点移至上一个触发器并激活其关联内容
`Home`	将焦点移至第一个触发器并激活其关联内容
`End`	将焦点移至最后一个触发器并激活其关联内容

选项卡 ​

特性 ​

安装 ​

结构 ​

API 参考 ​

Root ​

List ​

Trigger ​

Indicator ​

Content ​

示例 ​

垂直布局 ​

无障碍访问 ​

键盘交互 ​

选项卡

特性

安装

结构