コンポーネント
Tabs
タブパネルと呼ばれる、階層化された複数のコンテンツ領域を1つずつ切り替えて表示します。
Account
Password
Make changes to your account here.
使い方
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@murasakijs/ui";<Tabs defaultValue="account">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent value="account">Account settings.</TabsContent>
<TabsContent value="password">Password settings.</TabsContent>
</Tabs>API リファレンス
サブコンポーネント
| コンポーネント | 説明 |
|---|---|
Tabs | ルートプリミティブ。value・defaultValue・onValueChange・orientation を受け取ります。 |
TabsList | トリガーを並べる行です。 |
TabsTrigger | タブボタンです。value(必須)と disabled を受け取ります。 |
TabsContent | 対応する value がアクティブなときに表示されるパネルです。 |
選択状態、矢印キー操作、タブとパネルの関連付けは React Aria Components が提供します。