タブ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>
  )
}

使用コンポーネント

TabsBadge

関連コンポーネント

NavigationMenuCommand

設計の判断（UIXHERO）

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

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