120k
New

选项卡

PreviousNext

一组分层的内容区域——称为选项卡面板——每次显示一个。

Base UIReact AriaRadix UI
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,

安装

pnpm dlx shadcn@latest add tabs

用法

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
<Tabs defaultSelectedKey="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger id="account">账户</TabsTrigger>
    <TabsTrigger id="password">密码</TabsTrigger>
  </TabsList>
  <TabsContent id="account">在此处更改您的账户信息。</TabsContent>
  <TabsContent id="password">在此处更改您的密码。</TabsContent>
</Tabs>

组合

使用以下组合来构建 Tabs：

Tabs
├── TabsList
│   ├── TabsTrigger
│   └── TabsTrigger
├── TabsContent
└── TabsContent

线条

在 TabsList 上使用 variant="line" 属性以应用线条样式。

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

export function TabsLine() {

垂直

使用 orientation="vertical" 创建垂直选项卡。

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

export function TabsVertical() {

已禁用

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

export function TabsDisabled() {

图标

import { AppWindowIcon, CodeIcon } from "lucide-react"

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

RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

نظرة عامة
عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.
لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.
"use client"

import * as React from "react"

API 参考

请参阅 React Aria Tabs 文档。