111k
新建

Tabs

PreviousNext

一组分层内容区域，也就是标签面板，一次只显示一个。

Radix UIBase UI
Radix 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 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>

示例

线型

在 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 { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { AppWindowIcon, CodeIcon } from "lucide-react"

RTL

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

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

import * as React from "react"

API 参考

更多信息请参见 Radix UI Tabs 文档。