Tree Item
<quiet-tree-item>
A single item in a tree view that can contain nested children.
Tree items are individual nodes within a tree. They can be nested to create hierarchical structures, and support icons, custom expand indicators, and action buttons. See the tree documentation for examples and usage patterns.
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-tree-item> from the CDN, use the following code.
import 'https://cdn.quietui.org/v2.4.0/components/tree-item/tree-item.js';
To manually import <quiet-tree-item> from a self-hosted distribution, use the
following code. Remember to replace /path/to/quiet with the appropriate local path.
import '/path/to/quiet/components/tree-item/tree-item.js';
Slots Jump to heading
Tree Item supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) | The item's label content. |
subtree
|
Nested <quiet-tree-item> elements to show in a subtree. Items are automatically
assigned this slot during the slotchange event, so you shouldn't need to use this
often.
|
icon
|
An icon to display before the label. |
expand-icon
|
A custom expand/collapse icon. Defaults to a rotating chevron. |
Properties Jump to heading
Tree Item has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
expanded
|
Whether the item's children are visible. |
|
boolean
|
false
|
selected
|
Whether the item is currently selected. |
|
boolean
|
false
|
indeterminate
|
Whether some (but not all) descendants are selected. Automatically managed in multiple selection mode. |
|
boolean
|
false
|
disabled
|
Disables the tree item. |
|
boolean
|
false
|
lazy
|
When true, shows an expand icon even without children. Use this for items whose children will be loaded on demand. |
|
boolean
|
false
|
loading
|
When true, shows a loading spinner in place of the expand icon. |
|
boolean
|
false
|
Methods Jump to heading
Tree Item supports the following methods. You can obtain a reference to the element and call them like functions in JavaScript. Learn more about methods
| Name | Description | Arguments |
|---|---|---|
expand() |
Expands the item if it has children. Returns a promise that resolves when animation completes. | |
collapse() |
Collapses the item if it's expanded. Returns a promise that resolves when animation completes. | |
toggle() |
Toggles the expanded state. Returns a promise that resolves when animation completes. | |
focus() |
Sets focus to this item's row. |
options: FocusOptions
|
blur() |
Removes focus from this item's row. |
CSS parts Jump to heading
Tree Item exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts
| Name | Description | CSS selector |
|---|---|---|
row |
The clickable row containing the label and icons. |
::part(row)
|
indent |
The indentation spacer containing guide lines. |
::part(indent)
|
expand-icon |
The expand/collapse icon container. |
::part(expand-icon)
|
checkbox |
The checkbox element (only visible in multiple selection mode). |
::part(checkbox)
|
icon |
The item icon container. |
::part(icon)
|
label |
The label text container. |
::part(label)
|
children |
The container for nested child items. |
::part(children)
|
Custom States Jump to heading
Tree Item has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states
| Name | Description | CSS selector |
|---|---|---|
expanded |
Applied when the item is expanded. |
:state(expanded)
|
selected |
Applied when the item is selected. |
:state(selected)
|
indeterminate |
Applied when some (but not all) descendants are selected. |
:state(indeterminate)
|
disabled |
Applied when the item is disabled. |
:state(disabled)
|
lazy |
Applied when the item is lazy (has children to load on demand). |
:state(lazy)
|
loading |
Applied when the item's loading attribute is set. |
:state(loading)
|
has-children |
Applied when the item has child items or is lazy. |
:state(has-children)
|
focused |
Applied when the item has keyboard focus. |
:state(focused)
|
Dependencies Jump to heading
Tree Item automatically imports the following elements. Sub-dependencies are also included in this list.