125k

Tabs

PreviousNext

タブパネルと呼ばれるコンテンツのレイヤー化されたセクションを、一度に1つ表示するセット。

BaseRadixReact Aria
概要
主要な指標と最近のプロジェクトの活動状況を確認できます。進行中のすべてのプロジェクトの進捗を追跡します。
進行中のプロジェクトが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>

構成

次の構成を使用して、Tabs を構築します。

Tabs
├── TabsList
│   ├── TabsTrigger
│   └── TabsTrigger
├── TabsContent
└── TabsContent

行

ライン スタイルにするには、TabsList に variant="line" プロパティを使用します。

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/base/tabs"

export function TabsLine() {

垂直

垂直タブにするには、orientation="vertical" を使用します。

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/base/tabs"

export function TabsVertical() {

無効

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/base/tabs"

export function TabsDisabled() {

アイコン

import { AppWindowIcon, CodeIcon } from "lucide-react"

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/base/tabs"

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

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

import * as React from "react"

API リファレンス

詳細については、Base UI Tabs ドキュメントを参照してください。