Tree

Design

Code

Simple Example

Deciduous Birch

Maple Field maple

Red maple

Sugar maple

Oak

Coniferous Cedar

Pine

Spruce

Non-trees Bamboo

Cactus

Fern

<nile-tree>
  <nile-tree-item>
    Deciduous
    <nile-tree-item>Birch</nile-tree-item>
    <nile-tree-item>
      Maple
      <nile-tree-item>Field maple</nile-tree-item>
      <nile-tree-item>Red maple</nile-tree-item>
      <nile-tree-item>Sugar maple</nile-tree-item>
    </nile-tree-item>
    <nile-tree-item>Oak</nile-tree-item>
  </nile-tree-item>

  <nile-tree-item>
    Coniferous
    <nile-tree-item>Cedar</nile-tree-item>
    <nile-tree-item>Pine</nile-tree-item>
    <nile-tree-item>Spruce</nile-tree-item>
  </nile-tree-item>

  <nile-tree-item>
    Non-trees
    <nile-tree-item>Bamboo</nile-tree-item>
    <nile-tree-item>Cactus</nile-tree-item>
    <nile-tree-item>Fern</nile-tree-item>
  </nile-tree-item>
</nile-tree>

Examlple with tree

Deciduous Birch

Maple Field maple

Red maple

Sugar maple

Oak

Coniferous Cedar

Pine

Spruce

Non-trees Bamboo

Cactus

Fern

<nile-tree class="tree-with-lines">
  <nile-tree-item expanded>
    Deciduous
    <nile-tree-item>Birch</nile-tree-item>
    <nile-tree-item expanded>
      Maple
      <nile-tree-item>Field maple</nile-tree-item>
      <nile-tree-item>Red maple</nile-tree-item>
      <nile-tree-item>Sugar maple</nile-tree-item>
    </nile-tree-item>
    <nile-tree-item>Oak</nile-tree-item>
  </nile-tree-item>

  <nile-tree-item>
    Coniferous
    <nile-tree-item>Cedar</nile-tree-item>
    <nile-tree-item>Pine</nile-tree-item>
    <nile-tree-item>Spruce</nile-tree-item>
  </nile-tree-item>

  <nile-tree-item>
    Non-trees
    <nile-tree-item>Bamboo</nile-tree-item>
    <nile-tree-item>Cactus</nile-tree-item>
    <nile-tree-item>Fern</nile-tree-item>
  </nile-tree-item>
</nile-tree>

<style>
  .tree-with-lines {
    --indent-guide-width: 1px;
  }
</style>

Examlple with multiple selection

Deciduous Birch

Maple Field maple

Red maple

Sugar maple

Oak

Coniferous Cedar

Pine

Spruce

Non-trees Bamboo

Cactus

Fern

<nile-tree class="tree-with-lines">
  <nile-tree-item expanded selection="multiple">
    Deciduous
    <nile-tree-item>Birch</nile-tree-item>
    <nile-tree-item expanded>
      Maple
      <nile-tree-item>Field maple</nile-tree-item>
      <nile-tree-item>Red maple</nile-tree-item>
      <nile-tree-item>Sugar maple</nile-tree-item>
    </nile-tree-item>
    <nile-tree-item>Oak</nile-tree-item>
  </nile-tree-item>

  <nile-tree-item>
    Coniferous
    <nile-tree-item>Cedar</nile-tree-item>
    <nile-tree-item>Pine</nile-tree-item>
    <nile-tree-item>Spruce</nile-tree-item>
  </nile-tree-item>

  <nile-tree-item>
    Non-trees
    <nile-tree-item>Bamboo</nile-tree-item>
    <nile-tree-item>Cactus</nile-tree-item>
    <nile-tree-item>Fern</nile-tree-item>
  </nile-tree-item>
</nile-tree>

<style>
  .tree-with-lines {
    --indent-guide-width: 1px;
  }
</style>

Attributes & Properties

Name	Description	Reflects	Type	Default
selection	The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.		'single' \| 'multiple' \| 'leaf'	'single'
updateComplete	A read-only promise that resolves when the component has finished updating.			-

Events

Name	Description	Event Detail
nile-selection-change	Emitted when a tree item is selected or deselected.	{ selection: SlTreeItem[] }

CSS Variables

Name	Description	Default
--indent-size	The size of the indentation for nested items.	var(--nile-spacing-medium)
--indent-guide-color	The color of the indentation line.	var(--nile-color-neutral-200)
--indent-guide-offset	The amount of vertical spacing to leave between the top and bottom of the indentation line’s starting position.	0
--indent-guide-style	The style of the indentation line, e.g. solid, dotted, dashed.	solid
--indent-guide-width	The width of the indentation line.	0

Slots

Name	Description
base	The component’s base wrapper.

Parts

Name	Description
start	The start panel.
end	The end panel.
panel	Targets both the start and end panels.
divider	The divider that separates the start and end panels.