SideNav
同一画面内のビューを縦方向に並べて切り替えるためのナビゲーションコンポーネントです。「コレクションとシングルの2カラム」ページレイアウトのコレクション領域で一覧から選んだオブジェクトの詳細を切り替えるとき、設定画面などで1つの画面内に並ぶビューを切り替えるときに使います。
使用上の注意
TabBarで代用できないか検討する
SideNavは、異なるオブジェクトやビューを縦方向にスタックし、切り替えるためのコンポーネントです。スタックするアイテムが多いときやナビゲーション機能を持たせたいときに適していますが、そうでない場合はTabBarの使用を検討してください。
入れ子で使用しない
SideNavの影響範囲内のビューでは、SideNavの使用を避けてください。SideNav内のビューを分割したい場合はTabBarを使用してください。また、TabBar内でビューを分割したい場合はSideNavを使用してください。
モバイル
SideNavを使った2カラムのレイアウトは広い横幅を必要とするため、画面の横幅が狭いモバイルには適していません。ページを分割するか、SideNavをドロワーで表示してください。詳しくは、ページレイアウトを参照してください。
Props
SideNav props
各アイテムのデータの配列 @deprecated SideNavItemButton を使ってください
各アイテムの大きさ
アイテムを押下したときに発火するコールバック関数
コンポーネントに適用するクラス名
SideNavItemButton props
アイテムのタイトル @deprecated SideNav で items を使う時の props です。children を使ってください。
アイテムの大きさ
タイトルのプレフィックスの内容。通常、StatusLabelやIconの配置に用います。
選択されているアイテムかどうか
タイトルのサフィックスの内容。通常、Prefixを使用済みの場合にStatusLabelやChipの配置に用います。