UI Component Lab English

← コンポーネント一覧

ナビゲーション

Tabs タブ

関連する内容を複数のパネルに分け、1つずつ切り替えて表示する部品。

名前と写真の設定です。

別名

見分けるポイント

コンテンツ領域の上にラベルが横に並ぶ。選択中のラベルは下線などで強調され、そのパネルだけが表示される。

挙動

  • タブをクリックすると、そのパネルが表示され、他のパネルは隠れる。
  • Tab キーで止まるのは選択中のタブだけで、タブ間の移動は矢印キーで行う。
  • このデモでは、矢印キーでフォーカスを移すと同時にタブが選択される（自動アクティベーション）。

キーボード操作

キー動作
Tabタブリスト（選択中のタブ）にフォーカスし、次に押すとパネルへ移る。
← / →前・次のタブへ移って選択する。
Home最初のタブへ移る。
End最後のタブへ移る。

使い分け・注意点

  • サイト内の移動、手順の進行、絞り込み、並べて比べたい内容には使わない。
  • カルーセル: タブは名前の付いたパネルへ直接切り替え、カルーセルは前後のボタンで順に切り替える。
  • アコーディオン: タブは横に並べて1枚ずつ表示し、アコーディオンは縦に積んで複数を同時に開ける。
  • ステップナビゲーション: タブはどの順番でも開けるが、ステップナビゲーションの段階は決まった順に進める。

出典