Tabs
同じ画面内で異なるコンテンツビューを切り替えるコンポーネント。概要・詳細・レビューなど、関連するカテゴリ間の切り替えに使う。
インストール
npx shoji add tabs
プレビュー
プレビューコンテンツ
パターン
Pills
pill / capsule スタイルのタブ切り替え。料金プランの月額 / 年額トグル・フィルタータブなど、選択状態を強調したいときに使う。
tabstogglepricing
月額プランの料金表
With Badge
タブラベルに件数バッジを付けるパターン。「未対応 (3)」「受信済み (12)」など、タブごとのアイテム数を伝えるSaaS管理画面で頻出。
tabsSaaScountinbox
未対応の問い合わせ 3 件
Vertical
縦並びの設定タブ。「一般」「通知」「セキュリティ」のような設定画面で、左サイドナビ的に使うパターン。
tabssettingssidebar
一般設定のコンテンツ
使い方
こんなときに使う
- 同じ画面内で「概要」「詳細」「レビュー」など関連するビューを切り替えるとき
- 設定画面の「一般」「通知」「セキュリティ」など分類されたオプション群
- コードのプレビューとソースを切り替えるような用途
使わないほうがいい場面
- タブが6個を超える場合（スクロールが必要になると認知負荷が高い）
- タブ切り替えがページ遷移を伴う場合（Link コンポーネントを使う）
- タブの中に別のタブをネストする
JP 最適化のポイント
- line variant を採用 — 日本語UIではタブ下線スタイルが標準的で、pill/capsule スタイルより馴染みがある
- タブラベルは短く — 日本語のタブラベルは漢字2〜4文字が理想。長いと折り返しが発生する