Caroa UI

Tabs

タブ切り替えコンポーネント。

インポート

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

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

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

基本的な使い方

Loading...
<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が縦並びになり、ルート全体が横並び（サイドバー + コンテンツ）のレイアウトになります。

Loading...
<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を指定すると、タブが多くコンテナ幅を超える場合に横スクロールできます（スクロールバーは非表示）。

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

Props

Tabs

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

TabsList

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

TabsTrigger

PropTypeDefaultDescription
value*string-タブの識別値
disabledbooleanfalse無効状態

Previous

Table

Next

Textarea

On this page