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 |