Tree Views
Display information in a hierarchical structure using collapsible nodes.
import { TreeView, TreeViewItem, RecursiveTreeView, type TreeViewNode } from '@skeletonlabs/skeleton';Demo
Icons
Disabled State
Expand & Collapse
We can bind the tree view and trigger methods for expanding or collapsing all children at once.
Selection
Each tree view provides a number of selection options.
Single
When using single selection, our items are setup and treated as radio inputs.
Multiple
When using multiple selection, our items are setup and treated as checkbox inputs.
Relational
Use the children prop to create a relational connection between parent and children.
Recursive Mode
Tree views can be generated with a recursive data-driven method using the RecursiveTreeView components.
Svelte Components
The props lead and content supports Svelte Components in addition to HTML content.
Expanded
To access and modify the expanded nodes use expandedNodes array prop.
Disabled
To access and modify the disabled nodes use disabledNodes array prop.
Selection
Just like normal Tree-view, Recursive Tree-view supports selection with both single and multiple modes.
To access and modify the checked nodes use checkedNodes array prop.
Relational Selection
Just like normal Tree-view, Recursive Tree-view supports relational selection using the prop relational.
To access and modify the checked nodes use checkedNodes array prop.
In multiple relational selection mode, an extra array prop indeterminateNodes is available to indicate indeterminate
nodes.