タブTabs
Experimental

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

プロジェクト概要

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

状態とバリエーション

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

プロジェクト概要

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

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

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

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

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

表は横にスクロールできます

プロパティ	型	初期値	説明
Tabs.defaultValue	string	-	初期表示で選択するタブの value。
Tabs.value	string	-	制御コンポーネントとして扱う場合の現在値。
Tabs.onValueChange	(value: string) => void	-	選択タブが変わった時に呼ばれます。
TabsList	div	-	関連するトリガーをまとめるリスト。
TabsTrigger.value	string	-	対応する TabsContent と一致させる値。
TabsContent.value	string	-	対応する TabsTrigger と一致させる値。