Since Shoelace 2.0 Code stable

Tree Item

<sl-tree-item> | SlTreeItem

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

Examples

Basic Tree Items

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

sl-tree
  sl-tree-item
    | Item 1
    sl-tree-item Item A
    sl-tree-item Item B
    sl-tree-item Item C
  sl-tree-item Item 2
  sl-tree-item Item 3

import SlTree from '@teamshares/shoelace/dist/react/tree';
import SlTreeItem from '@teamshares/shoelace/dist/react/tree-item';

const App = () => (
  <SlTree>
    <SlTreeItem>
      Item 1
      <SlTreeItem>Item A</SlTreeItem>
      <SlTreeItem>Item B</SlTreeItem>
      <SlTreeItem>Item C</SlTreeItem>
    </SlTreeItem>
    <SlTreeItem>Item 2</SlTreeItem>
    <SlTreeItem>Item 3</SlTreeItem>
  </SlTree>
);

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 
<sl-tree>
  <sl-tree-item>
    Item 1
    <sl-tree-item>
      Item A
      <sl-tree-item>Item Z</sl-tree-item>
      <sl-tree-item>Item Y</sl-tree-item>
      <sl-tree-item>Item X</sl-tree-item>
    </sl-tree-item>
    <sl-tree-item>Item B</sl-tree-item>
    <sl-tree-item>Item C</sl-tree-item>
  </sl-tree-item>
  <sl-tree-item>Item 2</sl-tree-item>
  <sl-tree-item>Item 3</sl-tree-item>
</sl-tree>

sl-tree
  sl-tree-item
    | Item 1
    sl-tree-item
      | Item A
      sl-tree-item Item Z
      sl-tree-item Item Y
      sl-tree-item Item X
    sl-tree-item Item B
    sl-tree-item Item C
  sl-tree-item Item 2
  sl-tree-item Item 3

import SlTree from '@teamshares/shoelace/dist/react/tree';
import SlTreeItem from '@teamshares/shoelace/dist/react/tree-item';

const App = () => (
  <SlTree>
    <SlTreeItem>
      Item 1
      <SlTreeItem>
        Item A
        <SlTreeItem>Item Z</SlTreeItem>
        <SlTreeItem>Item Y</SlTreeItem>
        <SlTreeItem>Item X</SlTreeItem>
      </SlTreeItem>
      <SlTreeItem>Item B</SlTreeItem>
      <SlTreeItem>Item C</SlTreeItem>
    </SlTreeItem>
    <SlTreeItem>Item 2</SlTreeItem>
    <SlTreeItem>Item 3</SlTreeItem>
  </SlTree>
);

Selected

Use the selected attribute to select a tree item initially.

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

sl-tree
  sl-tree-item selected="true"
    | Item 1
    sl-tree-item Item A
    sl-tree-item Item B
    sl-tree-item Item C
  sl-tree-item Item 2
  sl-tree-item Item 3

import SlTree from '@teamshares/shoelace/dist/react/tree';
import SlTreeItem from '@teamshares/shoelace/dist/react/tree-item';

const App = () => (
  <SlTree>
    <SlTreeItem selected>
      Item 1
      <SlTreeItem>Item A</SlTreeItem>
      <SlTreeItem>Item B</SlTreeItem>
      <SlTreeItem>Item C</SlTreeItem>
    </SlTreeItem>
    <SlTreeItem>Item 2</SlTreeItem>
    <SlTreeItem>Item 3</SlTreeItem>
  </SlTree>
);

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 
<sl-tree>
  <sl-tree-item expanded>
    Item 1
    <sl-tree-item expanded>
      Item A
      <sl-tree-item>Item Z</sl-tree-item>
      <sl-tree-item>Item Y</sl-tree-item>
      <sl-tree-item>Item X</sl-tree-item>
    </sl-tree-item>
    <sl-tree-item>Item B</sl-tree-item>
    <sl-tree-item>Item C</sl-tree-item>
  </sl-tree-item>
  <sl-tree-item>Item 2</sl-tree-item>
  <sl-tree-item>Item 3</sl-tree-item>
</sl-tree>

sl-tree
  sl-tree-item expanded="true"
    | Item 1
    sl-tree-item expanded="true"
      | Item A
      sl-tree-item Item Z
      sl-tree-item Item Y
      sl-tree-item Item X
    sl-tree-item Item B
    sl-tree-item Item C
  sl-tree-item Item 2
  sl-tree-item Item 3

import SlTree from '@teamshares/shoelace/dist/react/tree';
import SlTreeItem from '@teamshares/shoelace/dist/react/tree-item';

const App = () => (
  <SlTree>
    <SlTreeItem expanded>
      Item 1
      <SlTreeItem expanded>
        Item A
        <SlTreeItem>Item Z</SlTreeItem>
        <SlTreeItem>Item Y</SlTreeItem>
        <SlTreeItem>Item X</SlTreeItem>
      </SlTreeItem>
      <SlTreeItem>Item B</SlTreeItem>
      <SlTreeItem>Item C</SlTreeItem>
    </SlTreeItem>
    <SlTreeItem>Item 2</SlTreeItem>
    <SlTreeItem>Item 3</SlTreeItem>
  </SlTree>
);

Component Props

Property Default Details
expanded false

boolean

Expands the tree item.
selected false

boolean

Draws the tree item in a selected state.
disabled false

boolean

Disables the tree item.
lazy false

boolean

Enables lazy loading behavior.
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Slots

Name Details
(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.

Learn more about using slots.

Events

Name Name React Event Details
sl-expand sl-expand onSlExpand

Emitted when the tree item expands.
sl-after-expand sl-after-expand onSlAfterExpand

Emitted after the tree item expands and all animations are complete.
sl-collapse sl-collapse onSlCollapse

Emitted when the tree item collapses.
sl-after-collapse sl-after-collapse onSlAfterCollapse

Emitted after the tree item collapses and all animations are complete.
sl-lazy-change sl-lazy-change onSlLazyChange

Emitted when the tree item’s lazy state changes.
sl-lazy-load sl-lazy-load onSlLazyLoad

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.

Learn more about events.

Methods

Name Details
getChildrenItems()

{ includeDisabled = true }: { includeDisabled?: boolean }

Gets all the nested tree items in this node.

Learn more about methods.

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.
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.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-checkbox>
  • <sl-icon>
  • <sl-spinner>