Tree View

fandhe-frontend-pre-styled-ui の tree_view mod が提供するスタイル済み Tree View 部品です。

ファイル階層等の入れ子構造を表示する部品です。WAI-ARIA Tree View パターン（role="tree"/role="treeitem"）に従い、展開・折りたたみは [hidden] 属性と CSS の詳細度制御で表現します。JSON データ専用の配色付き表示には JSON Tree View を検討してください。

Demo

headless-ui の TreeView（role="tree"/role="treeitem"）に pre-styled-ui の recipe CSS を適用した静的掲示です。"src" ブランチを展開済み、"src/lib.rs" を選択中、"README.md" を disabled として固定表示しています。インデントは CSS custom property（--fandhe-tree-view-indent）で表現しています。

Project files

src

lib.rs

nested

Cargo.toml

README.md

Features

role="tree"/role="treeitem" の WAI-ARIA Tree パターンを headless-ui が提供する（crates/pre-styled-ui/src/tree_view.rs:45）
branch-content の展開・折りたたみは [hidden] 属性と CSS の詳細度制御で表現する（tree_view.rs:173, 270-291）
disabled/selected 状態を data-disabled/data-selected で表現しフォーカス可視化と連動する（tree_view.rs:314-334）

Anatomy

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

API Reference

Data Attributes

Part	Attribute	Observed Values
branch	data-depth	0, 1
branch	data-state	closed, open
branch	data-value	src, src/nested
branch-content	data-state	closed, open
branch-control	data-state	closed, open
branch-indicator	data-state	closed, open
item	data-depth	0, 1, 2
item	data-disabled
item	data-selected
item	data-value	Cargo.toml, README.md, src/lib.rs, src/nested/util.rs
item-indicator	data-selected

CSS Variables

Variable	Default
--fandhe-tree-view-indent	1rem

Examples

Expanded branch

"src" ブランチを展開した状態で固定表示する例です。

Project files

src

lib.rs

Accessibility

WAI-ARIA

Attribute	Description
role="tree" / role="treeitem"	WAI-ARIA Tree View パターンに従い headless-ui が付与する（tree_view.rs:45）。