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/boolean/null/array/object）ごとに配色を切り替えます。ファイル階層等の一般的なツリー表示には Tree View を検討してください。

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"

stable: true

deprecated: null

tags: Array(2)

0: "headless"

1: "ui"

address: Object(2)

city: "Tokyo"

zip: 100

Features

key/colon/value の 3 anatomy パーツ（data-scope="json-tree-view"）を headless-ui からそのまま再エクスポートする。colon はイシュー #1661 で ark-ui/zag 突合により追加した区切りパーツで、pre-styled-ui は意図的に未スタイルのまま提供する（crates/pre-styled-ui/src/json_tree_view.rs:7-10）
expanded_to_depth で ark-ui の defaultExpandedDepth 相当の初期展開状態を決定的に作る（json_tree_view.rs 冒頭 doc、showcase.rs:2057-2058 の利用例）
値の型（string/number/boolean/null/array/object）ごとに [data-scope="json-tree-view"][data-part="value"][data-kind="..."] で配色を切り替える（イシュー #1661 で data-kind の bool 表記を boolean へ変更、json_tree_view.rs:111-113）

Anatomy

value
key
colon

API Reference

Data Attributes

Part	Attribute	Observed Values
`value`	`data-kind`	`array`, `boolean`, `null`, `number`, `object`, `string`

Examples

Package metadata

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

Package metadata

Object(2)

name: "fandhe-frontend"

stable: true

Accessibility

WAI-ARIA

Attribute	Description
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 を再エクスポート）。