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

选项卡

一组内容部分，一次显示一个。

查看源代码报告问题在 Playground 中查看
更改您的账户信息。
<Tabs.Root defaultValue="account">

  <Tabs.List>

    <Tabs.Trigger value="account">Account</Tabs.Trigger>

    <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

    <Tabs.Trigger value="settings">Settings</Tabs.Trigger>

  </Tabs.List>



  <Box pt="3">

    <Tabs.Content value="account">

      <Text size="2">Make changes to your account.</Text>

    </Tabs.Content>



    <Tabs.Content value="documents">

      <Text size="2">Access and update your documents.</Text>

    </Tabs.Content>



    <Tabs.Content value="settings">

      <Text size="2">Edit your profile or update contact information.</Text>

    </Tabs.Content>

  </Box>

</Tabs.Root>

API 参考

此组件继承自 Tabs 原语 并支持 常用边距属性。

根

包含所有组件部件。

属性类型默认值
asChild
布尔值
无默认值

列表

包含与活动内容并排的触发器。

属性类型默认值
大小
响应式<"1" | "2">
"2"
换行
响应式<"nowrap" | "wrap" | "wrap-reverse">
无默认值
对齐
响应式<"start" | "center" | "end">
无默认值
颜色
枚举
无默认值
高对比度
布尔值
无默认值

触发器

激活其关联内容的按钮。

内容

包含与每个触发器关联的内容。

示例

大小

使用 size 属性控制选项卡列表的大小。

<Flex direction="column" gap="4" pb="2">

  <Tabs.Root defaultValue="account">

    <Tabs.List size="1">

      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>

    </Tabs.List>

  </Tabs.Root>



  <Tabs.Root defaultValue="account">

    <Tabs.List size="2">

      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>

    </Tabs.List>

  </Tabs.Root>

</Flex>

颜色

使用 color 属性为选项卡列表分配特定的 颜色。

<Flex direction="column" gap="4" pb="2">

  <Tabs.Root defaultValue="account">

    <Tabs.List color="indigo">

      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>

    </Tabs.List>

  </Tabs.Root>



  <Tabs.Root defaultValue="account">

    <Tabs.List color="cyan">

      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>

    </Tabs.List>

  </Tabs.Root>



  <Tabs.Root defaultValue="account">

    <Tabs.List color="orange">

      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>

    </Tabs.List>

  </Tabs.Root>



  <Tabs.Root defaultValue="account">

    <Tabs.List color="crimson">

      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>

    </Tabs.List>

  </Tabs.Root>

</Flex>

高对比度

使用 highContrast 属性增加与背景的颜色对比度。

<Flex direction="column" gap="4" pb="2">

  <Tabs.Root defaultValue="account">

    <Tabs.List color="gray">

      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>

    </Tabs.List>

  </Tabs.Root>



  <Tabs.Root defaultValue="account">

    <Tabs.List color="gray" highContrast>

      <Tabs.Trigger value="account">Account</Tabs.Trigger>

      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>

      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>

    </Tabs.List>

  </Tabs.Root>

</Flex>

选项卡不应用于页面导航。请改用 Tab Nav，它专为此目的而设计，并具有等效的样式。

上一个表格
下一个Tab Nav
在 GitHub 上编辑此页面。