Radix 主页
由 WorkOS 制作
Radix 主页
由 WorkOS 制作
主题主题组件组件图标图标颜色颜色
文档游乐场博客
组件

分段控制

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

查看源代码报告问题在游乐场中查看
<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参考

此组件继承自切换组基元的道具和功能。它支持常见的边距道具。

根

包含控制项。

道具类型默认值
大小
Responsive<"1" | "2" | "3">
"2"
变体
"surface" | "classic"
"surface"
半径
"none" | "small" | "medium" | "large" | "full"
没有默认值

项目

代表控制的各个值。

示例

大小

使用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>
上一个滚动区域
下一个选择
在GitHub上编辑此页面。