Radix 首页
由 WorkOS 出品
Radix 首页
由 WorkOS 出品
主题主题基元基元图标图标颜色颜色
文档Playground博客
组件

分段控件

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

查看源码报告问题在 Playground 中查看
<SegmentedControl.Root defaultValue="inbox">

	<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

	<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

	<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

</SegmentedControl.Root>

API 参考

此组件继承了Toggle Group primitive的属性和功能。它支持通用的 margin 属性。

Root

包含控件的条目。

属性类型默认值
disabled
boolean
false
size
Responsive<"1" | "2" | "3">
"2"
variant
"surface" | "classic"
"surface"
radius
"none" | "small" | "medium" | "large" | "full"
无默认值

Item

表示控件的各个值。

示例

尺寸

使用 size 属性来控制控件的尺寸。

<Flex align="start" direction="column" gap="4">

	<SegmentedControl.Root defaultValue="inbox" size="1">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>



	<SegmentedControl.Root defaultValue="inbox" size="2">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>



	<SegmentedControl.Root defaultValue="inbox" size="3">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>

</Flex>

变体

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

<Flex align="start" direction="column" gap="4">

	<SegmentedControl.Root defaultValue="inbox" variant="surface">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>



	<SegmentedControl.Root defaultValue="inbox" variant="classic">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>

</Flex>

圆角

使用 radius 属性来指定特定的圆角值。

<Flex align="start" direction="column" gap="4">

	<SegmentedControl.Root defaultValue="inbox" radius="none">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>



	<SegmentedControl.Root defaultValue="inbox" radius="small">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>



	<SegmentedControl.Root defaultValue="inbox" radius="medium">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>



	<SegmentedControl.Root defaultValue="inbox" radius="large">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>



	<SegmentedControl.Root defaultValue="inbox" radius="full">

		<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>

		<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>

		<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>

	</SegmentedControl.Root>

</Flex>
上一个Scroll Area
下一个Select
在 GitHub 上编辑此页。