タブ

タブは、さまざまな画面、データセット、インタラクション間でコンテンツを整理したものです。タブを使用すると、個別の関連する情報グループの表示を切り替えることができます。

タブカバー

リソース

タイプ リンク ステータス
デザイン デザインソース(Figma) 利用可能
実装 Jetpack Compose 利用可能

ハイライト

  • タブは水平方向にスクロールできます。UI には必要な数のタブを設定できます。
  • タブは、コンテンツをカテゴリ別に整理して、ユーザーがさまざまな種類の情報をすばやく見つけられるようにします。
  • タブは、重要度が同じカテゴリでピアとして隣り合わせに表示されます。

バリエーション

タブ インジケーターには次の 2 種類があります。

タブピル タブ下線
  1. ピルインジケーター
  2. バー インジケーター

強調に応じて適切なタイプを選択してください。ピルインジケーターのタブはページ全体を整理する場合に推奨されますメイン コンテンツのデスティネーションが表示されます。バー インジケーターのタブは、関連コンテンツをさらに分離して階層を確立するために、コンテンツ エリア内で使用されます。

構造

タブの構造

  1. アイコン(省略可)
  2. ラベル
  3. アクティブ インジケーター
    1. バー
  4. コンテナ

状態

タブの状態

  1. デフォルト
  2. 集中
  3. 選択中

仕様

タブの構造

動作

あるタブから次のタブに移動すると、タブの移動に応じてその下のコンテンツも左右にスライドします。