kasumi/uiTabs
コンテンツをタブで切り替えて表示するコンポーネント。R
Installation
npx shadcn@latest add https://kasumi-ui.vercel.app/r/tabs.jsonUsage
プロジェクトの概要を表示します。
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
<Tabs defaultValue="overview">
<TabsList>
<TabsTrigger value="overview">概要</TabsTrigger>
<TabsTrigger value="schedule">スケジュール</TabsTrigger>
<TabsTrigger value="members">メンバー</TabsTrigger>
</TabsList>
<TabsContent value="overview">
<p>プロジェクトの概要を表示します。</p>
</TabsContent>
<TabsContent value="schedule">
<p>スケジュール一覧を表示します。</p>
</TabsContent>
<TabsContent value="members">
<p>参加メンバーの一覧を表示します。</p>
</TabsContent>
</Tabs>Underline
デフォルトのスタイル。下線でアクティブなタブを示します。
Underline スタイルのタブです。
<Tabs defaultValue="tab1">
<TabsList variant="underline">
<TabsTrigger value="tab1">タブ 1</TabsTrigger>
<TabsTrigger value="tab2">タブ 2</TabsTrigger>
</TabsList>
...
</Tabs>Pill
ピル型のスタイル。背景色でアクティブなタブを示します。
Pill スタイルのタブです。
<Tabs defaultValue="tab1">
<TabsList variant="pill">
<TabsTrigger value="tab1">タブ 1</TabsTrigger>
<TabsTrigger value="tab2">タブ 2</TabsTrigger>
</TabsList>
...
</Tabs>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | - | 初期表示するタブの値 |
| variant | "underline" | "pill" | "underline" | タブリストのスタイルバリエーション（TabsList に指定） |