用于在不同值或视图之间切换的切换按钮。
<SegmentedControl.Root defaultValue="inbox">
<SegmentedControl.Item value="inbox">收件箱</SegmentedControl.Item>
<SegmentedControl.Item value="drafts">草稿箱</SegmentedControl.Item>
<SegmentedControl.Item value="sent">已发送</SegmentedControl.Item>
</SegmentedControl.Root>
该组件继承了 切换组原语 的属性和功能。它支持 常见的边距属性。
包含控制的项。
| 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 属性控制控制的大小。
<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 属性控制控制的视觉样式。
<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 属性分配特定的半径值。
<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>