Material Design コンポーネントまとめてみた Navigation rail編

Navigation railを使用すると、中型デバイス上の UI ビューを切り替えることができます

PC

---

Navigation rail探してみた！

使用方法

□ 公式に書かれていること

⚡3 ～ 7 の遷移先とオプションの FAB を含めることができます
⚡アプリの異なる画面であっても、railは常に同じ場所に配置します

□ よくある使い方と特徴

• レールは、3 ～ 7 個のアプリの宛先と、オプションでフローティング アクション ボタン(FAB)を表示するサイド ナビゲーション コンポーネントです。

• レールは、デスクトップやタブレットなど、600 dp ～ 1239 dp の中型および拡張ウィンドウ サイズで唯一のナビゲーション コンポーネントとして機能します。

• ナビゲーション レールは次の用途には使用しないでください。

  • 画面サイズが小さい

  • 単一のタスク（単一の電子メールの表示など）

  • 二次ナビゲーション目的地

□ 利点：ユーザーが必要なページすばやく、容易にアクセスできる

• Navigation railアプリやウェブサイトの主要なセクション間での移動を効率的かつ直感的に行うためのクイックアクセスポイントをユーザーに提供します。

使い方NG例

アクティブ インジケーターを一度に複数の目的地に対して使用しないでください。

目的地に 2 色以上の色を使用したり、ナビゲーション レールにコントラストの低い色を使用したりしないでください。これにより、アクティブなアイテムを区別することがさらに困難になります。

ラベルのないアイコンの使用を避ける

✨スタイル

1. Container

2. Menu icon (optional)

3. Icon

4. Active indicator

5. Label text

6. Large badge label (optional)

7. Large badge (optional)

8. Badge (optional)

以上！次回はProgress indicatorsについてまとめていきます！

参考
引用元 Google - Material Design
URL：https://material.io/