Skip to content
fandhe-frontend
GitHub

JSON Tree View

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

JSON 風データ構造をツリー表示する部品です。headless-ui の TreeView anatomy（role="tree"/role="treeitem"）を再利用し、expanded_to_depth で初期展開状態を決定的に作れます。値の型（string/number/bool/null/array/object）ごとに配色を切り替えます。ファイル階層等の一般的なツリー表示には Tree View を検討してください。

関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API

Demo

headless-ui の JsonTreeView（tree_view #753 の派生、role="tree"/role="treeitem"）に pre-styled-ui の recipe CSS を適用した静的掲示です。expanded_to_depth(2) でルートと直下ブランチを展開済みとして固定表示し、値の型（string/number/bool/null/array/object）ごとに配色を切り替えています。

Package metadata
Object(6)
name"fandhe-frontend"
version"0.16.0"
stabletrue
deprecatednull
tagsArray(2)
0"headless"
1"ui"
addressObject(2)
city"Tokyo"
zip100

Features

  • key/value の 2 anatomy パーツを headless-ui からそのまま再エクスポートする（crates/pre-styled-ui/src/json_tree_view.rs:7）
  • expanded_to_depth で ark-ui の defaultExpandedDepth 相当の初期展開状態を決定的に作る（json_tree_view.rs 冒頭 doc、showcase.rs:2057-2058 の利用例）
  • 値の型（string/number/bool/null/array/object）ごとに [data-scope="json-tree-view"][data-part="value"][data-kind="..."] で配色を切り替える（json_tree_view.rs:111-113）

Anatomy

value
key

API Reference

Data Attributes

PartAttributeObserved Values
valuedata-kindarray, bool, null, number, object, string

Examples

Package metadata

name/stable の 2 フィールドを持つ JSON を深さ 1 まで展開した例です。

Package metadata
Object(2)
name"fandhe-frontend"
stabletrue

Accessibility

WAI-ARIA

AttributeDescription
role="tree" / role="treeitem"headless-ui の TreeView anatomy を再利用するため role="tree"/role="treeitem" を持つ（crates/pre-styled-ui/src/tree_view.rs:45 の rustdoc 記述、json_tree_view.rs:7-8 が同 anatomy を再エクスポート）。