Tree View

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

ファイル階層等の入れ子構造を表示する部品です。WAI-ARIA Tree View パターン（role="tree"/role="treeitem"）に従い、展開・折りたたみは [hidden] 属性と CSS の詳細度制御で表現します。JS 有効時は fandhe-frontend-wasm-full が実測した branch-content の高さを CSS 変数（--fandhe-content-height）へ書き込み、@starting-style + transition-behavior: allow-discrete によって展開・折りたたみを高さトランジションとして表現します（Collapsible と同型。hidden 契約自体は維持したままの CSS ネイティブな遷移）。JSON データ専用の配色付き表示には JSON Tree View を検討してください。

root は size（xs/sm/md/lg/xl、既定 md）で行密度・文字サイズを切り替えます。color-palette 軸は提供しません。行はキーボード操作時のフォーカスリングと hover 面を持ち、選択中の行の背景は hover で洗い流されません。

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）で表現しています。size（既定 md）は行密度・文字サイズを切り替えます。

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 参照）
disabled/selected 状態を data-disabled/data-selected で表現しフォーカス可視化と連動する（tree_view.rs 参照）
size（xs/sm/md/lg/xl、既定 md）が行密度・文字サイズを切り替える。root スコープの CSS custom property 経由で子孫パーツへ継承される（イシュー #1578）
hover 面・キーボードフォーカスリングを持つ（イシュー #1578。選択行の背景は hover で洗い流されない）

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
`size`	`Size`	`Md`	行密度・文字サイズを切り替える（tree_view.rs の root）。

Data Attributes

Part	Attribute	Observed Values
`branch`	`data-branch`	`src`, `src/nested`
`branch`	`data-depth`	`0`, `1`
`branch`	`data-state`	`closed`, `open`
`branch`	`data-value`	`src`, `src/nested`
`branch-content`	`data-depth`	`0`, `1`
`branch-content`	`data-state`	`closed`, `open`
`branch-content`	`data-value`	`src`, `src/nested`
`branch-control`	`data-depth`	`0`, `1`
`branch-control`	`data-state`	`closed`, `open`
`branch-control`	`data-value`	`src`, `src/nested`
`branch-indent-guide`	`data-depth`	`0`, `1`
`branch-indicator`	`data-state`	`closed`, `open`
`branch-text`	`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-disabled`	（値なし）
`item-indicator`	`data-selected`	（値なし）
`item-text`	`data-disabled`	（値なし）
`item-text`	`data-selected`	（値なし）

CSS Variables

Variable	Default
`--fandhe-tree-view-font-size`	`var(--fandhe-font-font-size-sm)`
`--fandhe-tree-view-indent`	`1rem`
`--fandhe-tree-view-indicator-size`	`1em`
`--fandhe-tree-view-row-gap`	`var(--fandhe-space-2)`
`--fandhe-tree-view-row-padding`	`var(--fandhe-space-1-5) var(--fandhe-space-2-5)`

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）。