Tree Item
<wa-tree-item>
A tree item serves as a hierarchical node that lives inside a tree.
This component must be used as a child of <wa-tree>. Please see the Tree docs to see examples of this component in action.
Importing
Jump to heading
Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.
To manually import this component from NPM, use the following code.
import '@awesome.me/webawesome/dist/components/tree-item/tree-item.js';
To manually import this component from React, use the following code.
import WaTreeItem from '@awesome.me/webawesome/dist/react/tree-item';
Slots
Jump to heading
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The default slot. |
collapse-icon
|
The icon to show when the tree item is collapsed. |
expand-icon
|
The icon to show when the tree item is expanded. |
Attributes & Properties
Jump to heading
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefinedDefault
styles |
||
customStates |
Methods for setting and checking custom states.
Type
objectDefault
{ /** Adds or removes the specified custom state. / set: (customState: string, active: boolean) => { if (!Boolean(this.internals?.states)) return; try { if (active) { this.internals.states.add(customState); } else { this.internals.states.delete(customState); } } catch (e) { if (String(e).includes("must start with '--'")) { / eslint-disable-next-line / console.error('Your browser implements an outdated version of CustomStateSet. Consider using a polyfill'); } else { throw e; } } }, /* Determines whether or not the element currently has the specified state. */ has: (customState: string) => { if (!Boolean(this.internals?.states)) return false; try { return this.internals.states.has(customState); } catch { return false; } }, } |
||
disableddisabled |
Disables the tree item.
Type
booleanDefault
false |
|
|
expandedexpanded |
Expands the tree item.
Type
booleanDefault
false |
|
|
lazylazy |
Enables lazy loading behavior.
Type
booleanDefault
false |
|
|
selectedselected |
Draws the tree item in a selected state.
Type
booleanDefault
false |
|
Methods
Jump to heading
Learn more about methods.
| Name | Description | Arguments |
|---|---|---|
getChildrenItems() |
Gets all the nested tree items in this node. |
{ includeDisabled = true }: { includeDisabled?: boolean }
|
relayNativeEvent() |
Given a native event, this function cancels it and dispatches it again from the host element using the desired event options. |
event: Event,
eventOptions: EventInit
|
Events
Jump to heading
Learn more about events.
| Name | Description |
|---|---|
wa-after-collapse |
Emitted after the tree item collapses and all animations are complete. |
wa-after-expand |
Emitted after the tree item expands and all animations are complete. |
wa-collapse |
Emitted when the tree item collapses. |
wa-expand |
Emitted when the tree item expands. |
wa-lazy-change |
Emitted when the tree item's lazy state changes. |
wa-lazy-load |
Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the lazy attribute to remove the loading state and update the tree. |
CSS custom properties
Jump to heading
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--hide-duration |
The animation duration when collapsing tree items.
Default
200ms
|
--show-duration |
The animation duration when expanding tree items.
Default
200ms
|
Custom States
Jump to heading
Learn more about custom states.
| Name | Description | CSS selector |
|---|---|---|
disabled |
Applied when the tree item is disabled. |
:state(disabled)
|
expanded |
Applied when the tree item is expanded. |
:state(expanded)
|
indeterminate |
Applied when the selection is indeterminate. |
:state(indeterminate)
|
selected |
Applied when the tree item is selected. |
:state(selected)
|
CSS parts
Jump to heading
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
base |
The component's base wrapper. |
::part(base)
|
checkbox |
The checkbox that shows when using multiselect. |
::part(checkbox)
|
checkbox__base |
The checkbox's exported base part. |
::part(checkbox__base)
|
checkbox__checked-icon |
The checkbox's exported checked-icon part. |
::part(checkbox__checked-icon)
|
checkbox__control |
The checkbox's exported control part. |
::part(checkbox__control)
|
checkbox__indeterminate-icon |
The checkbox's exported indeterminate-icon part. |
::part(checkbox__indeterminate-icon)
|
checkbox__label |
The checkbox's exported label part. |
::part(checkbox__label)
|
children |
The container that wraps the tree item's nested children. |
::part(children)
|
expand-button |
The container that wraps the tree item's expand button and spinner. |
::part(expand-button)
|
indentation |
The tree item's indentation container. |
::part(indentation)
|
item |
The tree item's container. This element wraps everything except slotted tree item children. |
::part(item)
|
label |
The tree item's label. |
::part(label)
|
spinner |
The spinner that shows when a lazy tree item is in the loading state. |
::part(spinner)
|
spinner__base |
The spinner's base part. |
::part(spinner__base)
|
Dependencies
Jump to heading
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.
Need a hand?