Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

分段控件

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

View sourceReport an issueView in 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 参考

¥API Reference

此组件继承了 切换组基础组件 的属性和功能。支持 常用边距属性。

¥This component inherits props and functionality from the Toggle Group primitive. It supports common margin props.

根

¥Root

包含控件的项目。

¥Contains the items of the control.

PropTypeDefault
disabled
boolean
false
size
Responsive<"1" | "2" | "3">
"2"
variant
"surface" | "classic"
"surface"
radius
"none" | "small" | "medium" | "large" | "full"
No default value

项目

¥Item

表示控件的各个值。

¥Represents individual values of the control.

示例

¥Examples

尺寸

¥Size

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

¥Use the size prop to control the size of the control.

<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

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

¥Use the variant prop to control the visual style of the control.

<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

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

¥Use the radius prop to assign a specific radius value.

<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>
Previous滚动区域
Next选择