# 标签

一组分层内容部分——称为选项卡面板——一次只能显示一个。

## Features

- 可以是可控或不可控的。

- 支持水平/垂直方向。

- 支持自动/手动激活。

- 完全的键盘导航。

## [结构](#结构)

导入所有部分并将它们组合在一起。

```jsx
import { Tabs } from "radix-ui";

export default () => (
  <Tabs.Root>
    <Tabs.List>
      <Tabs.Trigger />
    </Tabs.List>

    <Tabs.Content />
  </Tabs.Root>
);
```

## [API 参考](#api-参考)

### [根节点](#根节点)

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

| Prop             | Type       | Default          |
| ---------------- | ---------- | ---------------- |
| `asChild`        | `boolean`  | `false`          |
| `defaultValue`   | `string`   | No default value |
| `value`          | `string`   | No default value |
| `onValueChange`  | `function` | No default value |
| `orientation`    | `enum`     | `"horizontal"`   |
| `dir`            | `enum`     | No default value |
| `activationMode` | `enum`     | `"automatic"`    |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [列表](#列表)

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

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |
| `loop`    | `boolean` | `true`  |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [触发器](#触发器)

激活其关联内容的按钮。

| Prop       | Type      | Default          |
| ---------- | --------- | ---------------- |
| `asChild`  | `boolean` | `false`          |
| `value*`   | `string`  | No default value |
| `disabled` | `boolean` | `false`          |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"active" \| "inactive"`     |
| `[data-disabled]`    | 禁用时存在                   |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [内容](#内容)

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

| Prop         | Type      | Default          |
| ------------ | --------- | ---------------- |
| `asChild`    | `boolean` | `false`          |
| `value*`     | `string`  | No default value |
| `forceMount` | `boolean` | No default value |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"active" \| "inactive"`     |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

## [示例](#示例)

### [垂直](#垂直)

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

```jsx
import { Tabs } from "radix-ui";

export default () => (
  <Tabs.Root defaultValue="tab1" orientation="vertical">
    <Tabs.List aria-label="选项卡示例">
      <Tabs.Trigger value="tab1">一</Tabs.Trigger>

      <Tabs.Trigger value="tab2">二</Tabs.Trigger>

      <Tabs.Trigger value="tab3">三</Tabs.Trigger>
    </Tabs.List>

    <Tabs.Content value="tab1">选项卡一内容</Tabs.Content>

    <Tabs.Content value="tab2">选项卡二内容</Tabs.Content>

    <Tabs.Content value="tab3">选项卡三内容</Tabs.Content>
  </Tabs.Root>
);
```

## [可访问性](#可访问性)

遵循 [选项卡 WAI-ARIA 设计模式](https://www.w3.org/WAI/ARIA/apg/patterns/tabs)。

### [键盘交互](#键盘交互)

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

<!--$-->

<!--/$-->