106k
New

标签页

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,

安装

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">账户</TabsTrigger>
    <TabsTrigger value="password">密码</TabsTrigger>
  </TabsList>
  <TabsContent value="account">在此处更改您的账户信息。</TabsContent>
  <TabsContent value="password">在此处更改您的密码。</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"

API 参考

请参阅 Base UI 标签页 文档。