Tabs 标签页
在同一页面区域内切换多个并列且互斥的内容视图。
使用概览
适合使用
- 内容属于同一上下文，用户无需同时比较所有面板时。
不建议使用
- 每个视图需要独立网址层级，或隐藏内容会造成关键信息遗漏时。
真实示例
项目信息标签页
在项目概览与最近动态之间切换。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/tabs.json基础用法
导入
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@richardqiu/quartz/tabs";JSX
<Tabs defaultValue="overview"><TabsList aria-label="项目信息"><TabsTrigger value="overview">概览</TabsTrigger><TabsTrigger value="activity">动态</TabsTrigger></TabsList><TabsContent value="overview">项目概览内容</TabsContent><TabsContent value="activity">最近动态内容</TabsContent></Tabs>状态与控制摘要
默认
键盘焦点可见
已禁用
已选择
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | 决定标签列表方向及对应的键盘导航方式。 |
activationMode | "automatic" | "manual" | "automatic" | 决定聚焦标签时自动激活还是需要手动确认。 |
组合结构
- 01
Tabs - 02
TabsList - 03
TabsTrigger - 04
TabsContent
键盘约定
- 水平标签使用左右方向键，垂直标签使用上下方向键；Home 与 End 移到首尾可用项。
可访问性契约
- TabsList 需要能说明相关面板集合的可访问名称。
- 保持 tab、tablist、tabpanel、选中与禁用语义，且始终显示键盘焦点。