3.0.0-alpha.4 Alpha
Light Dark Light Dark System Search /

Tree Item

<wa-tree-item> Since 2.0 stable

A tree item serves as a hierarchical node that lives inside a tree.

Item 1 Item A Item B Item C Item 2 Item 3 
<wa-tree>
  <wa-tree-item>
    Item 1
    <wa-tree-item>Item A</wa-tree-item>
    <wa-tree-item>Item B</wa-tree-item>
    <wa-tree-item>Item C</wa-tree-item>
  </wa-tree-item>
  <wa-tree-item>Item 2</wa-tree-item>
  <wa-tree-item>Item 3</wa-tree-item>
</wa-tree>

Examples

Nested tree items

A tree item can contain other tree items. This allows the node to be expanded or collapsed by the user.

Item 1 Item A Item Z Item Y Item X Item B Item C Item 2 Item 3 
<wa-tree>
  <wa-tree-item>
    Item 1
    <wa-tree-item>
      Item A
      <wa-tree-item>Item Z</wa-tree-item>
      <wa-tree-item>Item Y</wa-tree-item>
      <wa-tree-item>Item X</wa-tree-item>
    </wa-tree-item>
    <wa-tree-item>Item B</wa-tree-item>
    <wa-tree-item>Item C</wa-tree-item>
  </wa-tree-item>
  <wa-tree-item>Item 2</wa-tree-item>
  <wa-tree-item>Item 3</wa-tree-item>
</wa-tree>

Selected

Use the selected attribute to select a tree item initially.

Item 1 Item A Item B Item C Item 2 Item 3 
<wa-tree>
  <wa-tree-item selected>
    Item 1
    <wa-tree-item>Item A</wa-tree-item>
    <wa-tree-item>Item B</wa-tree-item>
    <wa-tree-item>Item C</wa-tree-item>
  </wa-tree-item>
  <wa-tree-item>Item 2</wa-tree-item>
  <wa-tree-item>Item 3</wa-tree-item>
</wa-tree>

Expanded

Use the expanded attribute to expand a tree item initially.

Item 1 Item A Item Z Item Y Item X Item B Item C Item 2 Item 3 
<wa-tree>
  <wa-tree-item expanded>
    Item 1
    <wa-tree-item expanded>
      Item A
      <wa-tree-item>Item Z</wa-tree-item>
      <wa-tree-item>Item Y</wa-tree-item>
      <wa-tree-item>Item X</wa-tree-item>
    </wa-tree-item>
    <wa-tree-item>Item B</wa-tree-item>
    <wa-tree-item>Item C</wa-tree-item>
  </wa-tree-item>
  <wa-tree-item>Item 2</wa-tree-item>
  <wa-tree-item>Item 3</wa-tree-item>
</wa-tree>

Slots

Name Description
(default) The default slot.
expand-icon The icon to show when the tree item is expanded.
collapse-icon The icon to show when the tree item is collapsed.

Properties

Name Description Reflects
expanded
expanded
Expands the tree item.
Type boolean
Default false
selected
selected
Draws the tree item in a selected state.
Type boolean
Default false
disabled
disabled
Disables the tree item.
Type boolean
Default false
lazy
lazy
Enables lazy loading behavior.
Type boolean
Default false

Methods

Name Description Arguments
getChildrenItems() Gets all the nested tree items in this node. { includeDisabled = true }: { includeDisabled?: boolean }

Events

Name Description
wa-expand Emitted when the tree item expands.
wa-after-expand Emitted after the tree item expands and all animations are complete.
wa-collapse Emitted when the tree item collapses.
wa-after-collapse Emitted after the tree item collapses and all animations are complete.
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

Name Description
--selection-background-color
The background color of selected tree items.
--selection-indicator-color
The color the indicator for selected tree items.
--expand-button-color
The color of the expand button.
--show-duration
The animation duration when expanding tree items.
Default 200ms
--hide-duration
The animation duration when collapsing tree items.
Default 200ms

CSS parts

Name Description
base The component's base wrapper.
item The tree item's container. This element wraps everything except slotted tree item children.
item--disabled Applied when the tree item is disabled.
item--expanded Applied when the tree item is expanded.
item--indeterminate Applied when the selection is indeterminate.
item--selected Applied when the tree item is selected.
indentation The tree item's indentation container.
expand-button The container that wraps the tree item's expand button and spinner.
spinner The spinner that shows when a lazy tree item is in the loading state.
spinner__base The spinner's base part.
label The tree item's label.
children The container that wraps the tree item's nested children.
checkbox The checkbox that shows when using multiselect.
checkbox__base The checkbox's exported base part.
checkbox__control The checkbox's exported control part.
checkbox__control--checked The checkbox's exported control--checked part.
checkbox__control--indeterminate The checkbox's exported control--indeterminate part.
checkbox__checked-icon The checkbox's exported checked-icon part.
checkbox__indeterminate-icon The checkbox's exported indeterminate-icon part.
checkbox__label The checkbox's exported label part.

Dependencies

This component automatically imports the following elements. Subdependencies, if any exist, will also be included in this list.

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code.

import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/tree-item/tree-item.js';
 Coming soon! Coming soon!
    No results