# 分段控制

用于在不同值或视图之间切换的切换按钮。

```jsx
<SegmentedControl.Root defaultValue="inbox">
  <SegmentedControl.Item value="inbox">收件箱</SegmentedControl.Item>

  <SegmentedControl.Item value="drafts">草稿箱</SegmentedControl.Item>

  <SegmentedControl.Item value="sent">已发送</SegmentedControl.Item>
</SegmentedControl.Root>
```

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

该组件继承了 [切换组原语](/primitives/docs/components/toggle-group) 的属性和功能。它支持 [常见的边距属性](/themes/docs/overview/layout#margin-props)。

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

包含控制的项。

| Prop       | Type                                                 | Default          |
| ---------- | ---------------------------------------------------- | ---------------- |
| `disabled` | `boolean`                                            | `false`          |
| `size`     | `Responsive<"1" \| "2" \| "3">`                      | `"2"`            |
| `variant`  | `"surface" \| "classic"`                             | `"surface"`      |
| `radius`   | `"none" \| "small" \| "medium" \| "large" \| "full"` | No default value |

### [项](#项)

表示控制的单个值。

## [示例](#示例)

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

使用 `size` 属性控制控制的大小。

```jsx
<Flex align="start" direction="column" gap="4">
  <SegmentedControl.Root defaultValue="inbox" size="1">
    <SegmentedControl.Item value="inbox">收件箱</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">草稿箱</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">已发送</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" size="2">
    <SegmentedControl.Item value="inbox">收件箱</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">草稿箱</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">已发送</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" size="3">
    <SegmentedControl.Item value="inbox">收件箱</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">草稿箱</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">已发送</SegmentedControl.Item>
  </SegmentedControl.Root>
</Flex>
```

### [变体](#变体)

使用 `variant` 属性控制控制的视觉样式。

```jsx
<Flex align="start" direction="column" gap="4">
  <SegmentedControl.Root defaultValue="inbox" variant="surface">
    <SegmentedControl.Item value="inbox">收件箱</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">草稿箱</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">已发送</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" variant="classic">
    <SegmentedControl.Item value="inbox">收件箱</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">草稿箱</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">已发送</SegmentedControl.Item>
  </SegmentedControl.Root>
</Flex>
```

### [边角半径](#边角半径)

使用 `radius` 属性分配特定的半径值。

```jsx
<Flex align="start" direction="column" gap="4">
  <SegmentedControl.Root defaultValue="inbox" radius="none">
    <SegmentedControl.Item value="inbox">收件箱</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">草稿箱</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">已发送</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" radius="small">
    <SegmentedControl.Item value="inbox">收件箱</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">草稿箱</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">已发送</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" radius="medium">
    <SegmentedControl.Item value="inbox">收件箱</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">草稿箱</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">已发送</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" radius="large">
    <SegmentedControl.Item value="inbox">收件箱</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">草稿箱</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">已发送</SegmentedControl.Item>
  </SegmentedControl.Root>

  <SegmentedControl.Root defaultValue="inbox" radius="full">
    <SegmentedControl.Item value="inbox">收件箱</SegmentedControl.Item>

    <SegmentedControl.Item value="drafts">草稿箱</SegmentedControl.Item>

    <SegmentedControl.Item value="sent">已发送</SegmentedControl.Item>
  </SegmentedControl.Root>
</Flex>
```

<!--$-->

<!--/$-->