Tree view #
Component for the hierarchical and nested data
Basic usage #
List of video game genres:
Customizable content #
You can customize the body of node
It is absolutely optional
Filters #
Selectable #
Selected nodes: none
Colored checkboxes #
Color:
Props #
Name | Description | Types | Default |
---|---|---|---|
checked | Array of pre-selected tree nodes. |
|
|
checked-by | The key to set the checked field in the tree view model. |
|
|
children-by | Child nodes key. |
|
|
color | The checkboxes color. |
|
|
disabled-by | The key which describes the disabled property. |
|
|
disabledBy | The key which describes the disabled property. |
| |
expand-all | Expand or hide all nodes by default. |
|
|
expand-node-by | Click target to expand node, can be |
|
|
expandAll | Expand or hide all nodes by default. |
| |
expanded | Array of pre-expanded tree nodes. |
|
|
expanded-by | The where is placed the expanded property. |
|
|
expandedBy | The where is placed the expanded property. |
| |
filter | Tree view filter. |
|
|
filter-method | Custom tree view filter method. |
| - |
filterMethod | Custom tree view filter method. |
| |
icon-by | The key where is node placed. |
|
|
iconBy | The key where is node placed. |
| |
nodes | Tree nodes array. |
|
|
selectable | Selectable. |
|
|
selection-type | Selection type where is a |
|
|
selectionType | Selection type where is a |
| |
stateful | Add possibility to work with component without setting |
|
|
text-by | The key to show the value of node item. |
|
|
textBy | The key to show the value of node item. |
| |
track-by | The key to index nodes. |
|
|
trackBy | The key to index nodes. |
| |
value-by | The key to track the value. |
|
|
valueBy | The key to track the value. |
|
Events #
Name | Description |
---|---|
update-checked | The array of checked tree nodes. |
update-expanded | The array of expanded tree nodes. |
update-model-value | The event is triggered when the component needs to change the model. Is also used by |
update-selected |
Slots #
Name | Description |
---|---|
checkbox | Checkbox icon placeholder. |
content | Configurable node content. |
icon | Additional icon placeholder. |
icon-toggle | Node leaf icon. |
not-found | No matching nodes to the filter message. |
Css Variables #
Name | Default Value |
---|---|
--va-tree-view-padding | 0.3125rem |