SideNav

同一画面内のビューを縦方向に並べて切り替えるためのナビゲーションコンポーネントです。「コレクションとシングルの2カラム」ページレイアウトのコレクション領域で一覧から選んだオブジェクトの詳細を切り替えるとき、設定画面などで1つの画面内に並ぶビューを切り替えるときに使います。

使用上の注意

TabBarで代用できないか検討する

SideNavは、異なるオブジェクトやビューを縦方向にスタックし、切り替えるためのコンポーネントです。スタックするアイテムが多いときやナビゲーション機能を持たせたいときに適していますが、そうでない場合はTabBarの使用を検討してください。

入れ子で使用しない

SideNavの影響範囲内のビューでは、SideNavの使用を避けてください。SideNav内のビューを分割したい場合はTabBarを使用してください。また、TabBar内でビューを分割したい場合はSideNavを使用してください。

モバイル

SideNavを使った2カラムのレイアウトは広い横幅を必要とするため、画面の横幅が狭いモバイルには適していません。ページを分割するか、SideNavをドロワーで表示してください。詳しくは、ページレイアウトを参照してください。

使い方チェックリスト

SideNav

参照元：使用上の注意 > TabBarで代用できないか検討する 「使用上の注意 > TabBarで代用できないか検討する」の本文へ移動

• Should

  スタックするアイテムが多くなくナビゲーション機能が不要な場合は TabBar の使用を検討する

参照元：使用上の注意 > 入れ子で使用しない 「使用上の注意 > 入れ子で使用しない」の本文へ移動

• Avoid

  SideNav の影響範囲内のビューで SideNav を使わない

  • SideNav 内のビューを分割したい場合は TabBar を使う
  • TabBar 内でビューを分割したい場合は SideNav を使う

参照元：モバイル 「モバイル」の本文へ移動

• Must

  SideNav を使った 2 カラムのレイアウトはモバイルに適さないため、ページを分割するか SideNav をドロワーで表示する

Props

SideNav props

SideNavItemAnchor props

SideNavItemButton props