Svelte Component

Tree Views

Display information in a hierarchical structure using collapsible nodes.

typescript
import { TreeView, TreeViewItem } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA

Demo

Child of Child 1

Child of Child 2

Child 2

Child

Icons

Folder

File 1

File 2

Selection

Enable selection using the prop selection

Single

Clean Code

The Clean Coder

The Art of Unix Programming

Movies

TV

Selected medium: books
Selected book: Clean Code

Multiple

Clean Code

The Clean Coder

The Art of Unix Programming

Movies

TV

Selected mediums: books,movies
Selected books: Clean Code,The Art of Unix Programming

Relational

By passing children references to a parent TreeViewItem, the check value of the parent will be relational, meaning it will react to the check value of the children.

Books

Clean Code

The Clean Coder

The Art of Unix Programming

Movies

TV

Select Movies to see relational checking.

Books

Clean Code

The Clean Coder

The Art of Unix Programming

Movies

TV

Select children of Books to see relational checking.

Disabled

Books

Clean Code

The Clean Coder

The Art of Unix Programming

Clean Code

The Clean Coder

The Art of Unix Programming

TV

Expand/Collapse all

By binding to the tree we can call the functions expandAll(), collapseAll().

Clean Code

The Clean Coder

The Art of Unix Programming

The Flash

Guardians of the Galaxy

Black Panther

The Simpsons

Rick and Morty

Family Guy

Select/Deselect all

By binding to the tree we can call the functions selectAll(), deselectAll().

Note: These functions are excecuted only in multiple selection mode.

Books

Movies

TV