Tabs

インポート

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@caroainc/ui-components/tabs'

Composition

Tabs
├─ TabsList
│  └─ TabsTrigger+
└─ TabsContent+

TabsList、1件以上のTabsTrigger、対応するTabsContentが必要です。TriggerはList内に置き、TriggerとContentのvalueを一致させてください。

基本的な使い方

アカウント

アカウント設定を変更します。

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">アカウント</TabsTrigger>
    <TabsTrigger value="password">パスワード</TabsTrigger>
  </TabsList>
  <TabsContent value="account">
    アカウントの内容
  </TabsContent>
  <TabsContent value="password">
    パスワードの内容
  </TabsContent>
</Tabs>

縦タブ（orientation="vertical"）

orientation="vertical"（Radix標準のprop）を指定すると、TabsListが縦並びになり、ルート全体が横並び（サイドバー + コンテンツ）のレイアウトになります。

一般設定

全般的な設定を変更します。

<Tabs defaultValue="general" orientation="vertical">
  <TabsList>
    <TabsTrigger value="general">一般</TabsTrigger>
    <TabsTrigger value="account">アカウント</TabsTrigger>
    <TabsTrigger value="notifications">通知</TabsTrigger>
  </TabsList>
  <TabsContent value="general">一般設定の内容</TabsContent>
  <TabsContent value="account">アカウントの内容</TabsContent>
  <TabsContent value="notifications">通知の内容</TabsContent>
</Tabs>

underlineバリアントも縦方向に対応しており、下線が右辺の縦線に切り替わります。

タブが多い場合の横スクロール（scrollable）

TabsListにscrollableを指定すると、タブが多くコンテナ幅を超える場合に横スクロールできます（スクロールバーは非表示）。

タブ1の内容

<TabsList scrollable>
  <TabsTrigger value="tab1">タブ1</TabsTrigger>
  {/* ... */}
</TabsList>

Props

Tabs

Prop	Type	Default	Description
`defaultValue`	`string`	`-`	初期選択タブの値
`value`	`string`	`-`	選択タブ（制御コンポーネント）
`onValueChange`	`(value: string) => void`	`-`	タブ変更時のコールバック
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Radix標準のprop。verticalでTabsListが縦並びになり、ルート全体が横並びレイアウトになる
`variant`	`'default' \| 'underline'`	`'default'`	見た目のバリエーション（TabsList/TabsTriggerへ伝播）

TabsList

Prop	Type	Default	Description
`variant`	`'default' \| 'underline'`	`'default'`	見た目のバリエーション（未指定時はTabsのvariantを継承）
`scrollable`	`boolean`	`false`	タブが多い場合に横スクロールを有効にする（overflow-x-auto + スクロールバー非表示 + min-w-0/max-w-fullで親幅を超えないようにする）

TabsTrigger

Prop	Type	Default	Description
`value*`	`string`	`-`	タブの識別値
`disabled`	`boolean`	`false`	無効状態

Tabs

アカウント

一般設定

On this page

アカウント

一般設定