Tree View

階層構造の展開・折りたたみ・選択を扱う部品です。fandhe-frontend-headless-ui の tree_view mod は 12 anatomy パーツと、展開集合 + 選択値を合成した状態機械を提供し、WAI-ARIA APG の Tree パターンに従う role="tree"/role="treeitem"/role="group" と aria-expanded/aria-selected/aria-level 等を出力します。Themes 版と異なりインデントガイドの見た目を持たず、構造とアクセシビリティ属性のみを担います。

スタイル済みの表示例は Tree View を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Project files

▾src

✓lib.rs

README.md

Features

Root / Label / Tree / Branch / BranchControl / BranchIndicator / BranchText / BranchContent / BranchIndentGuide / Item / ItemText / ItemIndicator の 12 anatomy パーツを提供する（tree_view.rs:1-10）。
展開集合（MultiSelect）+ 選択値（SingleSelect）を合成した状態機械 TreeView を提供し、TreeView::render_nodes が深さ・aria-posinset/aria-setsize を再帰的に計算する（tree_view.rs:425-488）。
tree は role="tree"、branch/item は role="treeitem"、branch_content は role="group" を固定出力する WAI-ARIA APG Tree パターン準拠（tree_view.rs:125-259,269-303）。
branch/item は disabled=true のとき aria-disabled="true" を対で付与する（ネイティブ disabled を持たない role="treeitem" のための代替、tree_view.rs:186-193,295-300）。
キーボードナビゲーション・typeahead は SSR 静的マークアップに寄与しない CSR 挙動層のスコープ外（tree_view.rs:72-77）。

Anatomy

root
  label
  tree
    branch
      branch-control
        branch-indicator
        branch-text
      branch-content
        branch-indent-guide
        item
          item-indicator
          item-text

API Reference

Arguments

Name	Type	Default	Description
tree: aria_label_text, aria_labelledby_id	Option<&str>, Option<&str>	None, None	tree のアクセシブルな名前（いずれか片方が Some を推奨、tree_view.rs:125-146）。
branch/item: level, posinset, setsize, depth	&str, &str, &str, &str		呼び出し側が usize から文字列化した aria-level/aria-posinset/aria-setsize/data-depth（tree_view.rs:150-156）。
TreeView::render_nodes: nodes	&[TreeNode]		決定的な静的木を現在の展開・選択状態で再帰描画する（tree_view.rs:486-488）。

Data Attributes

Part	Attribute	Observed Values
branch	data-depth	0
branch	data-state	open
branch	data-value	src
branch-content	data-state	open
branch-control	data-state	open
branch-indicator	data-state	open
item	data-depth	0, 1
item	data-selected
item	data-value	README.md, lib.rs
item-indicator	data-selected

Examples

Closed branch

branch が折りたたまれ、branch_content が hidden の例です（Demo は展開済み）。

Project files

▸src

Accessibility

WAI-ARIA

Attribute	Description
role="tree" / role="treeitem" / role="group"	tree/branch・item/branch_content に固定出力する（tree_view.rs:125-259,269-303）。
aria-expanded	branch のみ（open/closed を反映、tree_view.rs:173-176）。
aria-selected / aria-level / aria-posinset / aria-setsize	branch/item 双方に出力する（tree_view.rs:177-180,286-290）。
aria-disabled="true"	disabled=true のときのみ branch/item に出力する（tree_view.rs:186-193,295-300）。