106k
New

标签页 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">账户</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 参考

请参见 Radix Tabs 文档。