サイドバーExperimental
アプリやドキュメントの左側に主要ナビゲーションをまとめ、必要に応じてアイコン幅へ折りたためるサイドナビゲーションです。
プレビュー
状態とバリエーション
折りたたみ初期表示
狭い画面や補助ナビでは、アイコンだけで始めて必要に応じて展開できます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| SidebarProvider.defaultCollapsed | boolean | false | 非制御時の初期折りたたみ状態。 |
| SidebarProvider.collapsed | boolean | - | 折りたたみ状態を外部 state で制御します。 |
| SidebarProvider.onCollapsedChange | (collapsed: boolean) => void | - | 折りたたみ状態が変わった時に呼ばれます。 |
| useSidebar() | { collapsed, setCollapsed, toggleCollapsed } | - | 子孫コンポーネントからサイドバー状態を読み書きします。 |
| SidebarToggle | button | - | サイドバー境界線上に配置する折りたたみトグル。フッターや本文のレイアウト幅を消費しません。 |
| SidebarToggle.expandLabel | ReactNode | "Expand sidebar" | 折りたたみ時に表示するツールチップと aria-label。 |
| SidebarToggle.collapseLabel | ReactNode | "Collapse sidebar" | 展開時に表示するツールチップと aria-label。 |
| SidebarToggle.placement | "center" | "header" | "footer" | "footer" | トグルを置く境界線位置。既定ではフッター上端と右境界線の交点に置きます。 |
使い方
Loading...