Murasaki
コンポーネント

Tabs

タブパネルと呼ばれる、階層化された複数のコンテンツ領域を1つずつ切り替えて表示します。

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ルートプリミティブ。valuedefaultValueonValueChangeorientation を受け取ります。
TabsListトリガーを並べる行です。
TabsTriggerタブボタンです。value(必須)と disabled を受け取ります。
TabsContent対応する value がアクティブなときに表示されるパネルです。

選択状態、矢印キー操作、タブとパネルの関連付けは React Aria Components が提供します。

GitHub でこのページを改善

On this page