109k
新建

标签页

上一页下一页

一组分层的内容区域（称为标签面板），每次显示其中一个。

Radix UIBase UI
Radix UI - shadcn/ui 组件库
概览
查看关键指标和近期项目活动。跟踪所有活跃项目的进度。
你有 12 个活跃项目和 3 个待办任务。
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 配置指南。

概览
查看关键指标和近期项目活动。跟踪所有活跃项目的进度。
你有 12 个活跃项目和 3 个待办任务。
"use client"

import * as React from "react"

API 参考

查看 Radix Tabs 文档。