Tree

階層構造のデータをツリー形式で表示するコンポーネントです。ファイルシステムや組織図の表示に使用します。

Basic

jui-tree の最も基本的な使用例です。

default-expand-all を設定すると、初期状態で全ノードを展開します。

checkable を有効にすると、各ノードにチェックボックスが表示されます。

show-line を有効にすると、親子間の接続線が表示されます。

WAI-ARIA:
- ツリー全体に role="tree" が設定されます。
- 各ノードには role="treeitem" が設定されます。
- 展開/折りたたみ状態は aria-expanded で通知されます。
- チェック状態は aria-checked で通知されます。
キーボードナビゲーション:
- ↑ / ↓: ノード間の移動
- ←: ノードの折りたたみ / 親ノードへ移動
- →: ノードの展開 / 子ノードへ移動
- Space: チェックボックスの切り替え
- Enter: ノードの選択

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークン（--jui-color-border, --jui-color-text, --jui-color-brand 等）を参照して描画されます。

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
CSS Transitions	展開/折りたたみアニメーション	26+	16+	9+	Baseline 2014
CSS 変数 (`var()`)	デザイントークン・カラー適用	49+	31+	9.1+	Baseline 2017

💡 いずれの機能も主要ブラウザで広く対応済みです。

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`checkable`	`checkable`	チェックボックス表示	`boolean`	`false`
`checkedKeys`	`checked-keys`	チェック済みのキー（JSON文字列 or 配列）	`string \| string[]`	`'[]'`
`defaultExpandAll`	`default-expand-all`	初期状態で全ノード展開	`boolean`	`false`
`expandedKeys`	`expanded-keys`	展開中のキー（JSON文字列 or 配列）	`string \| string[]`	`'[]'`
`selectable`	`selectable`	選択可能	`boolean`	`true`
`selectedKeys`	`selected-keys`	選択済みのキー（JSON文字列 or 配列）	`string \| string[]`	`'[]'`
`showLine`	`show-line`	接続線表示	`boolean`	`false`
`treeData`	`tree-data`	ツリーデータ（JSON文字列 or 配列）	`TreeNode[] \| string`	`'[]'`

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
`juiCheck`	ノードチェック時	`CustomEvent<{ checkedKeys: string[]; node: TreeNode; }>`
`juiExpand`	ノード展開/折りたたみ時	`CustomEvent<{ expandedKeys: string[]; node: TreeNode; }>`
`juiSelect`	ノード選択時	`CustomEvent<{ selectedKeys: string[]; node: TreeNode; }>`

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Built with StencilJS