Tabs.tsx

基本信息

• 类型: React 组件 (shadcn/ui)
• 路径: ./src/components/ui/tabs.tsx

功能描述

标签页组件，用于在内容区域之间切换。基于 Radix UI，支持键盘导航和动画效果。

导出内容

• Tabs - 标签页根组件
• TabsList - 标签列表
• TabsTrigger - 标签触发器
• TabsContent - 标签内容

Props 接口

Tabs

属性	类型	必填	默认值	说明
value	string	否	-	当前选中值（受控）
defaultValue	string	否	-	默认选中值
onValueChange	(value: string) => void	否	-	值变化回调
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<typeof TabsPrimitive.Root>	否	-	Radix Tabs 属性

TabsList

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<typeof TabsPrimitive.List>	否	-	List属性

TabsTrigger

属性	类型	必填	默认值	说明
value	string	是	-	标签值
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<typeof TabsPrimitive.Trigger>	否	-	Trigger属性

TabsContent

属性	类型	必填	默认值	说明
value	string	是	-	对应标签值
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<typeof TabsPrimitive.Content>	否	-	Content属性

依赖

• @radix-ui/react-tabs - Radix UI 标签页原语
• @/lib/utils - 工具函数 (cn)

使用示例

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

// 基础用法
<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">账户</TabsTrigger>
    <TabsTrigger value="password">密码</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    <p>账户设置内容</p>
  </TabsContent>
  <TabsContent value="password">
    <p>密码更改内容</p>
  </TabsContent>
</Tabs>

// 受控模式
const [activeTab, setActiveTab] = useState("photos");
<Tabs value={activeTab} onValueChange={setActiveTab}>
  <TabsList>
    <TabsTrigger value="photos">照片</TabsTrigger>
    <TabsTrigger value="videos">视频</TabsTrigger>
  </TabsList>
  <TabsContent value="photos">照片内容</TabsContent>
  <TabsContent value="videos">视频内容</TabsContent>
</Tabs>