§10-07Layout
Tree view
階層構造を折りたたみ可能なツリーで示す。
フォルダや組織図など入れ子になった構造を、必要な枝だけ開いて辿れる。全体を一度に見せると長すぎる階層に向く。
実装のポイント
role=tree/treeitem と aria-expanded で開閉状態を伝え、矢印キーで移動・開閉できるようにする。大規模ツリーは子ノードを遅延読み込みする。
- 特徴
- キーボード操作
- アクセシビリティ
- デモで使っているもの
- lucide-react
§10-07Layout
階層構造を折りたたみ可能なツリーで示す。
フォルダや組織図など入れ子になった構造を、必要な枝だけ開いて辿れる。全体を一度に見せると長すぎる階層に向く。
role=tree/treeitem と aria-expanded で開閉状態を伝え、矢印キーで移動・開閉できるようにする。大規模ツリーは子ノードを遅延読み込みする。