导航栏 Tabs

基于 @radix-ui/react-tabs 封装的无障碍标签页组件，具备优雅的样式、状态管理和动画支持。

---

📦 引入方式

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@npmqg/react-ui-tabs';

---

🧩 使用示例

📚 基本使用

示例

这里是账户信息内容。

源码

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">账户信息</TabsTrigger>
    <TabsTrigger value="password">修改密码</TabsTrigger>
  </TabsList>

  <TabsContent value="account">
    <p>这里是账户信息内容。</p>
  </TabsContent>
  <TabsContent value="password">
    <p>这里是密码修改内容。</p>
  </TabsContent>
</Tabs>

📚 垂直方向排列

示例

内容 A

源码

<Tabs orientation="vertical" defaultValue="profile">
  <div className="flex">
    <TabsList className="flex-col">
      <TabsTrigger value="profile">个人资料</TabsTrigger>
      <TabsTrigger value="security">安全设置</TabsTrigger>
    </TabsList>
    <div className="ml-4">
      <TabsContent value="profile">内容 A</TabsContent>
      <TabsContent value="security">内容 B</TabsContent>
    </div>
  </div>
</Tabs>

---

🧩 组件结构

组件名	描述
Tabs	根组件，控制整体状态
TabsList	标签按钮容器（<div>）
TabsTrigger	标签按钮（<button>）
TabsContent	对应标签的内容区域（<div>）

---

🧩 组件结构

组件名	属性	类型	默认值	说明
Tabs	value	string	—	当前激活的 tab 键值
	defaultValue	string	—	默认选中项
	onValueChange	(value: string) => void	—	切换时回调
	orientation	'horizontal' | 'vertical'	'horizontal'	tab 列排列方向
TabsList	className	string	—	自定义样式类名
TabsTrigger	value	string	—	关联的内容标识
	disabled	boolean	false	禁用状态
	data-state	string	—	激活态：data-state=active，加背景、高亮字体、阴影
TabsContent	value	string	—	关联的触发键值

---

🎨 样式说明（Tailwind）

• TabsList 使用 inline-flex 实现横向标签布局
• TabsTrigger 在 data-[state=active] 状态下自动应用背景色、文字色与阴影
• 所有组件都支持 className 进行样式扩展

---

💡 使用建议

• value 和 defaultValue 使用唯一标识字符串即可
• 结合动画库（如 Framer Motion）可实现渐变效果
• 可封装成动态选项卡组件（如可添加/关闭 tab）