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 primitive的属性，并支持通用外边距属性。

根元素

包含所有组件部分。

属性类型默认值
asChild
boolean
无默认值

列表

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

属性类型默认值
size
Responsive<"1" | "2">
"2"
wrap
Responsive<"nowrap" | "wrap" | "wrap-reverse">
无默认值
justify
Responsive<"start" | "center" | "end">
无默认值
color
enum
无默认值
highContrast
boolean
无默认值

触发器

激活其关联内容的按钮。

内容

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

示例

尺寸

使用 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>

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

上一个表格
下一个选项卡导航
在 GitHub 上编辑此页。