组件
Overview
View your key metrics and recent project activity. Track progress across all your active projects.
You have 12 active projects and 3 pending tasks.
import {
Card,
CardContent,安装
🌐 Installation
pnpm dlx shadcn@latest add tabs
用法
🌐 Usage
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"<Tabs defaultValue="account" className="w-[400px]">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent value="account">Make changes to your account here.</TabsContent>
<TabsContent value="password">Change your password here.</TabsContent>
</Tabs>示例
🌐 Examples
线
🌐 Line
在 TabsList 上使用 variant="line" 属性来设置线条样式。
🌐 Use the variant="line" prop on TabsList for a line style.
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
export function TabsLine() {垂直
🌐 Vertical
使用 orientation="vertical" 来表示垂直制表符。
🌐 Use orientation="vertical" for vertical tabs.
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
export function TabsVertical() {已禁用
🌐 Disabled
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
export function TabsDisabled() {图标
🌐 Icons
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { AppWindowIcon, CodeIcon } from "lucide-react"
从右到左
🌐 RTL
要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。
🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.
نظرة عامة
عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.
لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.
"use client"
import * as React from "react"API参考
🌐 API Reference
请参阅 Radix Tabs 文档。
🌐 See the Radix Tabs documentation.