🌐 Nodejs.cn
新建

标签

PreviousNext

一组分层的内容部分（称为选项卡面板），一次显示一个。

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

安装

🌐 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

查看 Base UI Tabs 文档。

🌐 See the Base UI Tabs documentation.