ナビゲーションと開示@neumorphism-ui/tabs

Tabs

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

@neumorphism-ui/tabs

Registry JSON

プレビュー

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

インストール

npx shadcn@latest add @neumorphism-ui/tabs

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

Import

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

Example

<Tabs defaultValue="surface">
  <TabsList aria-label="デザイン token">
    <TabsTrigger value="surface">サーフェス</TabsTrigger>
    <TabsTrigger value="motion">モーション</TabsTrigger>
    <TabsTrigger value="access">アクセシビリティ</TabsTrigger>
  </TabsList>
  <TabsContent value="surface">raised と inset のサーフェス token です。</TabsContent>
  <TabsContent value="motion">短く一貫した transition token です。</TabsContent>
  <TabsContent value="access">focus と contrast の token です。</TabsContent>
</Tabs>

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`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 の値です。