# 标签

一组内容部分，一次显示一个。

```jsx
<Tabs.Root defaultValue="account">
  <Tabs.List>
    <Tabs.Trigger value="account">账户</Tabs.Trigger>

    <Tabs.Trigger value="documents">文档</Tabs.Trigger>

    <Tabs.Trigger value="settings">设置</Tabs.Trigger>
  </Tabs.List>

  <Box pt="3">
    <Tabs.Content value="account">
      <Text size="2">对您的账户进行更改。</Text>
    </Tabs.Content>

    <Tabs.Content value="documents">
      <Text size="2">访问并更新您的文档。</Text>
    </Tabs.Content>

    <Tabs.Content value="settings">
      <Text size="2">编辑您的个人资料或更新联系信息。</Text>
    </Tabs.Content>
  </Box>
</Tabs.Root>
```

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

该组件继承自 [Tabs primitive](/primitives/docs/components/tabs) 的属性，并支持 [常用的边距属性](/themes/docs/overview/layout#margin-props)。

### [根组件](#根组件)

包含所有组件部分。

| Prop      | Type      | Default          |
| --------- | --------- | ---------------- |
| `asChild` | `boolean` | No default value |

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

包含与活动内容并列的触发器。

| Prop           | Type                                               | Default          |
| -------------- | -------------------------------------------------- | ---------------- |
| `size`         | `Responsive<"1" \| "2">`                           | `"2"`            |
| `wrap`         | `Responsive<"nowrap" \| "wrap" \| "wrap-reverse">` | No default value |
| `justify`      | `Responsive<"start" \| "center" \| "end">`         | No default value |
| `color`        | `enum`                                             | No default value |
| `highContrast` | `boolean`                                          | No default value |

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

激活其相关内容的按钮。

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

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

## [示例](#示例)

### [尺寸](#尺寸)

使用 `size` 属性控制标签列表的大小。

```jsx
<Flex direction="column" gap="4" pb="2">
  <Tabs.Root defaultValue="account">
    <Tabs.List size="1">
      <Tabs.Trigger value="account">账户</Tabs.Trigger>

      <Tabs.Trigger value="documents">文档</Tabs.Trigger>

      <Tabs.Trigger value="settings">设置</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List size="2">
      <Tabs.Trigger value="account">账户</Tabs.Trigger>

      <Tabs.Trigger value="documents">文档</Tabs.Trigger>

      <Tabs.Trigger value="settings">设置</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>
</Flex>
```

### [颜色](#颜色)

使用 `color` 属性为标签列表分配特定的 [颜色](/themes/docs/theme/color)。

```jsx
<Flex direction="column" gap="4" pb="2">
  <Tabs.Root defaultValue="account">
    <Tabs.List color="indigo">
      <Tabs.Trigger value="account">账户</Tabs.Trigger>

      <Tabs.Trigger value="documents">文档</Tabs.Trigger>

      <Tabs.Trigger value="settings">设置</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List color="cyan">
      <Tabs.Trigger value="account">账户</Tabs.Trigger>

      <Tabs.Trigger value="documents">文档</Tabs.Trigger>

      <Tabs.Trigger value="settings">设置</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List color="orange">
      <Tabs.Trigger value="account">账户</Tabs.Trigger>

      <Tabs.Trigger value="documents">文档</Tabs.Trigger>

      <Tabs.Trigger value="settings">设置</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List color="crimson">
      <Tabs.Trigger value="account">账户</Tabs.Trigger>

      <Tabs.Trigger value="documents">文档</Tabs.Trigger>

      <Tabs.Trigger value="settings">设置</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>
</Flex>
```

### [高对比度](#高对比度)

使用 `highContrast` 属性增加与背景的颜色对比度。

```jsx
<Flex direction="column" gap="4" pb="2">
  <Tabs.Root defaultValue="account">
    <Tabs.List color="gray">
      <Tabs.Trigger value="account">账户</Tabs.Trigger>

      <Tabs.Trigger value="documents">文档</Tabs.Trigger>

      <Tabs.Trigger value="settings">设置</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List color="gray" highContrast>
      <Tabs.Trigger value="account">账户</Tabs.Trigger>

      <Tabs.Trigger value="documents">文档</Tabs.Trigger>

      <Tabs.Trigger value="settings">设置</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>
</Flex>
```

### [导航](#导航)

标签不应用于页面导航。请使用 [Tab Nav](/themes/docs/components/tab-nav)，这是为此目的而设计的，具有等效样式。

<!--$-->

<!--/$-->