Tabs

同じページの文脈を保ちながら、関連する表示を切り替える場合に使います。

プレビュー

ポートフォリオの表示

概要、活動、設定を切り替えます。概要には例示用の評価額と月間変動が表示されます。

ポートフォリオ評価額₩18,420,000今月 +6.8%

インストール

この Registry を初めて使う場合は、先に基本設定と共通スタイルの導入を完了してください。

npx shadcn@latest add @neumorphism-ui/tabs

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

TabsList に名前を付け、TabsTrigger と TabsContent の value を一致させます。初期値を設定し、他の操作と共有する場合は有効な値を制御します。

"use client";

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

export default function Example() {
  return (
    <Tabs defaultValue="profile">
      <TabsList aria-label="Account settings">
        <TabsTrigger value="profile">Profile</TabsTrigger>
        <TabsTrigger value="security">Security</TabsTrigger>
      </TabsList>
      <TabsContent value="profile">Edit your profile.</TabsContent>
      <TabsContent value="security">Manage your security settings.</TabsContent>
    </Tabs>
  );
}

API リファレンス

Base UI Tabs を基盤に、active trigger を raised サーフェス、list を inset track として表示します。制御・非制御の値、自動・手動 activation、水平・垂直 orientation に対応します。

コンポーネント	プロパティ	型	デフォルト	説明
`Tabs`	`value / defaultValue`	`string`	`—`	制御された active tab の値、または非制御時の初期値です。
`Tabs`	`onValueChange`	`(value: string) => void`	`—`	active tab が変わったときに呼び出されます。
`Tabs`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	list の向きと Arrow キーによる移動軸を設定します。
`TabsList`	`activateOnFocus`	`boolean`	`false`	Arrow キーで focus を移したときに panel も有効化するかを決定します。
`TabsTrigger`	`value`必須	`string`	`—`	関連する TabsContent と共有する一意の値です。
`TabsContent`	`value`必須	`string`	`—`	その panel を開く trigger の値です。

プレビュー

ポートフォリオの表示

インストール

使い方

API リファレンス

アクセシビリティ