タブTabsBeta

一度に1つだけ表示されるタブパネル群です。

プレビュー

プロジェクト概要

タブで関連する内容を切り替えます。

状態とバリエーション

件数付き

未読数や保留件数をタブ名の横に表示します。

プロジェクト概要

タブで関連する内容を切り替えます。

状態管理あり

選択中のタブを URL やアプリ state と同期したい場合は value を制御します。

現在選択中のタブは「概要」です。

下線タイプ

ページ内のプレビュー切り替えのように、背景を持たず下線で現在地を示します。

サイト内のプレビュー切り替えと同じ下線タイプです。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
Tabs.defaultValuestring-初期表示で選択するタブの value。
Tabs.valuestring-制御コンポーネントとして扱う場合の現在値。
Tabs.onValueChange(value: string) => void-選択タブが変わった時に呼ばれます。
Tabs.classNamestring-Tabs はデフォルトで親幅いっぱいに広がります。幅は外側または Tabs 自身の max-w-* で制約します。
TabsListdiv-関連するトリガーをまとめるリスト。
TabsTrigger.valuestring-対応する TabsContent と一致させる値。
TabsContent.valuestring-対応する TabsTrigger と一致させる値。

使い方

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

export function ProjectTabs() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-2xl">
      <TabsList className="w-full justify-start overflow-x-auto overflow-y-hidden">
        <TabsTrigger value="overview">概要</TabsTrigger>
        <TabsTrigger value="activity">アクティビティ</TabsTrigger>
        <TabsTrigger value="settings">設定</TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="space-y-1 text-sm text-muted-foreground">
        <p className="font-medium text-foreground">プロジェクト概要</p>
        <p>タブで関連する内容を切り替えます。</p>
      </TabsContent>
      <TabsContent value="activity" className="text-sm text-muted-foreground">
        最新の変更履歴を表示します。
      </TabsContent>
      <TabsContent value="settings" className="text-sm text-muted-foreground">
        プロジェクト設定を表示します。
      </TabsContent>
    </Tabs>
  )
}

設計の判断

  • 入りきらないときは、折り返さずに横へ流す。資料は「2行以上の多段タブ」を禁止に挙げ、同時に「横スクロールが必須になるほどの本数」も崩れた形に挙げています。GUNJO は前者を避けるほうを選び、TabsList を横スクロールにしました。日本語のラベルは英語より横に長くなりやすく、折り返すか削るかしかない作りだと、どちらを選んでも読めなくなるからです。ラベルは決して省略しません。
  • 流せるが、つまみは見せない。横スクロールのつまみは Firefox と WebKit の両方で隠してあります。タブの帯の中に細い横棒が増えると、選ばれているタブの下線と見分けが付かなくなるためです。左端のタブに戻れるように左寄せから始め、収まる幅のときだけ中央に寄せます。
  • 縦向きは見た目ごと入れ替える。orientation に縦を渡すと、土台の Radix が付ける印を手がかりに、枠線とカードの見た目を捨てて左の柱と本文の2列になります（#165）。呼ぶ側が className で作り直さずに済ませるためで、資料の「タブの中にタブを作らない」を守ったまま、項目の多い画面を柱で表せます。

使用コンポーネント

TabsBadge

関連コンポーネント

NavigationMenuCommand

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: Tabsナビゲーション設計 (Navigation Design)