Tree item
Examples
Nested tree items
Selected
Expanded
Importing
Slots
Properties
Events
Methods
CSS Parts
Dependencies

Tree Item

<ahi-tree-item> | AhiTreeItem

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

<ahi-tree>
  <ahi-tree-item>
    Item 1
    <ahi-tree-item>Item A</ahi-tree-item>
    <ahi-tree-item>Item B</ahi-tree-item>
    <ahi-tree-item>Item C</ahi-tree-item>
  </ahi-tree-item>
  <ahi-tree-item>Item 2</ahi-tree-item>
  <ahi-tree-item>Item 3</ahi-tree-item>
</ahi-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

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

Selected

Use the selected attribute to select a tree item initially.

Item 1 Item A

Item B

Item C

Item 2

Item 3

<ahi-tree>
  <ahi-tree-item selected>
    Item 1
    <ahi-tree-item>Item A</ahi-tree-item>
    <ahi-tree-item>Item B</ahi-tree-item>
    <ahi-tree-item>Item C</ahi-tree-item>
  </ahi-tree-item>
  <ahi-tree-item>Item 2</ahi-tree-item>
  <ahi-tree-item>Item 3</ahi-tree-item>
</ahi-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

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

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/tree-item/tree-item.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/tree-item/tree-item.js';

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.

Learn more about using slots.

Properties

Name	Description	Type	Default
`expanded`	Expands the tree item.	`boolean`	`false`
`selected`	Draws the tree item in a selected state.	`boolean`	`false`
`disabled`	Disables the tree item.	`boolean`	`false`
`lazy`	Enables lazy loading behavior.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.

Events

Name	Description	Event Detail
`ahi-expand`	Emitted when the tree item expands.	-
`ahi-after-expand`	Emitted after the tree item expands and all animations are complete.	-
`ahi-collapse`	Emitted when the tree item collapses.	-
`ahi-after-collapse`	Emitted after the tree item collapses and all animations are complete.	-
`ahi-lazy-change`	Emitted when the tree item’s lazy state changes.	-
`ahi-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.	-

Learn more about events.

Methods

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

Learn more about methods.

CSS Parts

Name	Description
`base`	Deprecated. Use the `tree-item` part instead.
`tree-item`	The component’s outer 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.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<ahi-checkbox>
<ahi-icon>
<ahi-spinner>