Tree Views
Display information in a hierarchical structure using collapsible nodes.
import { TreeView, TreeViewItem, 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 using a recursive data-driven method.
Single Selection
Relational checking is automatically applied when generating your list in a recursive manner. Setting a child as checked
will not automatically affect the parent.
Multiple Selection
Relational checking is automatically applied when generating your list in a recursive manner.