一组内容部分，一次显示一个。
<Tabs.Root defaultValue="account">
<Tabs.List>
<Tabs.Trigger value="account">账户</Tabs.Trigger>
<Tabs.Trigger value="documents">文档</Tabs.Trigger>
<Tabs.Trigger value="settings">设置</Tabs.Trigger>
</Tabs.List>
<Box pt="3">
<Tabs.Content value="account">
<Text size="2">对您的账户进行更改。</Text>
</Tabs.Content>
<Tabs.Content value="documents">
<Text size="2">访问并更新您的文档。</Text>
</Tabs.Content>
<Tabs.Content value="settings">
<Text size="2">编辑您的个人资料或更新联系信息。</Text>
</Tabs.Content>
</Box>
</Tabs.Root>
该组件继承自 Tabs primitive 的属性，并支持 常用的边距属性。
包含所有组件部分。
| Prop | Type | Default |
|---|---|---|
asChild | boolean | No default value |
包含与活动内容并列的触发器。
| Prop | Type | Default |
|---|---|---|
size | Responsive<"1" | "2"> | "2" |
wrap | Responsive<"nowrap" | "wrap" | "wrap-reverse"> | No default value |
justify | Responsive<"start" | "center" | "end"> | No default value |
color | enum | No default value |
highContrast | boolean | No default value |
激活其相关内容的按钮。
包含与每个触发器关联的内容。
使用 size 属性控制标签列表的大小。
<Flex direction="column" gap="4" pb="2">
<Tabs.Root defaultValue="account">
<Tabs.List size="1">
<Tabs.Trigger value="account">账户</Tabs.Trigger>
<Tabs.Trigger value="documents">文档</Tabs.Trigger>
<Tabs.Trigger value="settings">设置</Tabs.Trigger>
</Tabs.List>
</Tabs.Root>
<Tabs.Root defaultValue="account">
<Tabs.List size="2">
<Tabs.Trigger value="account">账户</Tabs.Trigger>
<Tabs.Trigger value="documents">文档</Tabs.Trigger>
<Tabs.Trigger value="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">账户</Tabs.Trigger>
<Tabs.Trigger value="documents">文档</Tabs.Trigger>
<Tabs.Trigger value="settings">设置</Tabs.Trigger>
</Tabs.List>
</Tabs.Root>
<Tabs.Root defaultValue="account">
<Tabs.List color="cyan">
<Tabs.Trigger value="account">账户</Tabs.Trigger>
<Tabs.Trigger value="documents">文档</Tabs.Trigger>
<Tabs.Trigger value="settings">设置</Tabs.Trigger>
</Tabs.List>
</Tabs.Root>
<Tabs.Root defaultValue="account">
<Tabs.List color="orange">
<Tabs.Trigger value="account">账户</Tabs.Trigger>
<Tabs.Trigger value="documents">文档</Tabs.Trigger>
<Tabs.Trigger value="settings">设置</Tabs.Trigger>
</Tabs.List>
</Tabs.Root>
<Tabs.Root defaultValue="account">
<Tabs.List color="crimson">
<Tabs.Trigger value="account">账户</Tabs.Trigger>
<Tabs.Trigger value="documents">文档</Tabs.Trigger>
<Tabs.Trigger value="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">账户</Tabs.Trigger>
<Tabs.Trigger value="documents">文档</Tabs.Trigger>
<Tabs.Trigger value="settings">设置</Tabs.Trigger>
</Tabs.List>
</Tabs.Root>
<Tabs.Root defaultValue="account">
<Tabs.List color="gray" highContrast>
<Tabs.Trigger value="account">账户</Tabs.Trigger>
<Tabs.Trigger value="documents">文档</Tabs.Trigger>
<Tabs.Trigger value="settings">设置</Tabs.Trigger>
</Tabs.List>
</Tabs.Root>
</Flex>
标签不应用于页面导航。请使用 Tab Nav，这是为此目的而设计的，具有等效样式。