SideNav
ビューを適切な単位で分割して縦方向に並べ、切り替えるためのコンポーネントです。項目設定のビューを切り替えるときなどに使います。
使用上の注意
TabBarで代用できないか検討する
SideNavは、異なるオブジェクトやビューを縦方向にスタックし、切り替えるためのコンポーネントです。スタックするアイテムが多いときやナビゲーション機能を持たせたいときに適していますが、そうでない場合はTabBarの使用を検討してください。
入れ子で使用しない
SideNavの影響範囲内のビューでは、SideNavの使用を避けてください。SideNav内のビューを分割したい場合はTabBarを使用してください。また、TabBar内でビューを分割したい場合はSideNavを使用してください。
モバイル
複数カラムを前提としたレイアウトになってしまうため、モバイルでは使わないでください。ページや項目を選択する専用の画面を挟むなど、別の切り替え機構を検討してください。
Props
SideNav props
items非推奨
SideNavItemButtonProps[]
各アイテムのデータの配列 @deprecated SideNavItemButton を使ってください
size
"s" "default"
各アイテムの大きさ
onClick
(e: MouseEvent<HTMLButtonElement, MouseEvent>, id: string) => void
アイテムを押下したときに発火するコールバック関数
className
string
コンポーネントに適用するクラス名
SideNavItemButton props
title非推奨
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
アイテムのタイトル @deprecated SideNav で items を使う時の props です。children を使ってください。
prefix
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
タイトルのプレフィックスの内容。通常、StatusLabelやIconの配置に用います。
suffix
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
タイトルのサフィックスの内容。通常、Prefixを使用済みの場合にStatusLabelやChipの配置に用います。
current
false true
選択されているアイテムかどうか
size
"s" "default"
アイテムの大きさ
onClick
(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void
アイテムを押下したときに発火するコールバック関数