<dy-tree>
A tree component that displays hierarchical data structures. It supports features like expandable nodes, item highlighting, status indicators, and lazy loading of child nodes.
Example
Loading...
<dy-tree
style=${"width: 300px"}
.highlights=${["Item 3.3.1"]}
.items=${ [ {"label":"Item 1"}, {"label":"Item 2"}, { "label": "Item 3", "children": [ {"label":"Item 3.1","status":"notice"}, {"label":"Item 3.2"}, { "label": "Item 3.3", "children": [ { "label": "Item 3.3.1", "status": "negative", "tags": ["R","C"] } ] } ] }, { "label": "Item 4", "childrenPlaceholder": "Loading..." }, { "label": "Item 5", "children": [{"label":"Item 5.1"}] } ] }
@itemclick=${({detail, target}) => target.highlights = [detail.value]}
@expand=${async ({detail, target}) => {if (detail.label!='Item 4')return;await new Promise(r=>setTimeout(r, 1000));detail.children=Array(4).fill(null).map((_, i) => ({ label: `Item 4.${i + 1}` }));target.items=[...target.items]}}></dy-tree>
API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type | Description |
|---|---|---|---|
data |
Yes | TreeItem[] |
@deprecated |
items |
Yes | TreeItem[] |
|
highlights |
Yes | any[] |
value array |
itemclick |
Emitter<MouseEventDetail> |
||
itemcontextmenu |
Emitter<MouseEventDetail> |
||
expand |
Emitter<TreeItem> |
||
collapse |
Emitter<TreeItem> |
Instance Methods
| Method | Type |
|---|---|
isExpand |
(value: any) => boolean |
expandToItems |
(values: any[]) => void |
collapseItems |
(values: any[]) => void |
iterateCollapseItem |
(value: any) => void |
Other
| Type | Value |
|---|---|
| Event | itemclick, itemcontextmenu, expand, collapse |
| Part | item |