Tree
<ahi-tree> | AhiTree
Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded and collapsed as desired by the user.
<ahi-tree>
<ahi-tree-item>
Group 1
<ahi-tree-item>Item 1</ahi-tree-item>
<ahi-tree-item>
Group A
<ahi-tree-item>Item 1</ahi-tree-item>
<ahi-tree-item>Item 2</ahi-tree-item>
<ahi-tree-item>Item 3</ahi-tree-item>
</ahi-tree-item>
<ahi-tree-item>Item 2</ahi-tree-item>
</ahi-tree-item>
<ahi-tree-item>
Group 2
<ahi-tree-item>Item 1</ahi-tree-item>
<ahi-tree-item>Item 2</ahi-tree-item>
<ahi-tree-item>Item 3</ahi-tree-item>
</ahi-tree-item>
<ahi-tree-item>
Group 3
<ahi-tree-item>Item 1</ahi-tree-item>
<ahi-tree-item>Item 2</ahi-tree-item>
<ahi-tree-item>Item 3</ahi-tree-item>
</ahi-tree-item>
</ahi-tree>
Examples
Selection Modes
The selection attribute lets you change the selection behavior of the tree.
- Use
singleto allow the selection of a single item (default). - Use
multipleto allow the selection of multiple items. - Use
leafto only allow leaf nodes to be selected.
<ahi-select id="selection-mode" value="single" label="Selection">
<ahi-option value="single">Single</ahi-option>
<ahi-option value="multiple">Multiple</ahi-option>
<ahi-option value="leaf">Leaf</ahi-option>
</ahi-select>
<br />
<ahi-tree class="tree-selectable">
<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>
<script>
const selectionMode = document.querySelector('#selection-mode');
const tree = document.querySelector('.tree-selectable');
selectionMode.addEventListener('ahi-change', () => {
tree.querySelectorAll('ahi-tree-item').forEach(item => (item.selected = false));
tree.selection = selectionMode.value;
});
</script>
Showing Indent Guides
Indent guides can be drawn by setting --indent-guide-width. You can also change the color,
offset, and style, using --indent-guide-color, --indent-guide-style, and
--indent-guide-offset, respectively.
To change how far each level is indented, set --indent-size on the
ahi-tree itself, in px. The tree declares its own default, so a value set on an
element around it is ignored. Don’t use font-size for this. The tree counts levels in
font-size, so a font-size on ahi-tree shifts every level over by that amount, and
a font-size on ahi-tree-item gives every level the same indentation. Neither one
resizes the text, which sets its own size. For the same reason, an em or % value
for --indent-size resolves to zero and removes the indentation entirely.
<ahi-tree class="tree-with-lines">
<ahi-tree-item expanded>
Group 1
<ahi-tree-item>Item 1</ahi-tree-item>
<ahi-tree-item expanded>
Group A
<ahi-tree-item>Item 1</ahi-tree-item>
<ahi-tree-item>Item 2</ahi-tree-item>
<ahi-tree-item>Item 3</ahi-tree-item>
</ahi-tree-item>
<ahi-tree-item>Item 2</ahi-tree-item>
</ahi-tree-item>
<ahi-tree-item>
Group 2
<ahi-tree-item>Item 1</ahi-tree-item>
<ahi-tree-item>Item 2</ahi-tree-item>
<ahi-tree-item>Item 3</ahi-tree-item>
</ahi-tree-item>
<ahi-tree-item>
Group 3
<ahi-tree-item>Item 1</ahi-tree-item>
<ahi-tree-item>Item 2</ahi-tree-item>
<ahi-tree-item>Item 3</ahi-tree-item>
</ahi-tree-item>
</ahi-tree>
<style>
.tree-with-lines {
--indent-guide-width: 1px;
}
</style>
Lazy Loading
Use the lazy attribute on a tree item to indicate that the content is not yet present and will
be loaded later. When the user tries to expand the node, the loading state is set to
true and the ahi-lazy-load event will be emitted to allow you to load data
asynchronously. The item will remain in a loading state until its content is changed.
If you want to disable this behavior after the first load, simply remove the lazy attribute
and, on the next expand, the existing content will be shown instead.
<ahi-tree>
<ahi-tree-item lazy>Files</ahi-tree-item>
</ahi-tree>
<script type="module">
const lazyItem = document.querySelector('ahi-tree-item[lazy]');
lazyItem.addEventListener('ahi-lazy-load', () => {
// Simulate asynchronous loading
setTimeout(() => {
const subItems = ['1.pdf', '2.pdf', '3.pdf', '4.pdf'];
for (const item of subItems) {
const treeItem = document.createElement('ahi-tree-item');
treeItem.innerText = item;
lazyItem.append(treeItem);
}
// Disable lazy mode once the content has been loaded
lazyItem.lazy = false;
}, 1000);
});
</script>
With Icons
Decorative icons can be used before labels to provide hints for each node.
<ahi-tree class="tree-with-icons">
<ahi-tree-item expanded>
<ahi-icon name="folder"></ahi-icon>
Files
<ahi-tree-item>
<ahi-icon name="folder"> </ahi-icon>
Photos
<ahi-tree-item>
<ahi-icon name="photo"></ahi-icon>
1.jpg
</ahi-tree-item>
<ahi-tree-item>
<ahi-icon name="photo"></ahi-icon>
2.jpg
</ahi-tree-item>
<ahi-tree-item>
<ahi-icon name="photo"></ahi-icon>
3.jpg
</ahi-tree-item>
</ahi-tree-item>
<ahi-tree-item>
<ahi-icon name="folder"></ahi-icon>
Documents
<ahi-tree-item>
<ahi-icon name="file"></ahi-icon>
1.txt
</ahi-tree-item>
<ahi-tree-item>
<ahi-icon name="file-type-pdf"></ahi-icon>
2.pdf
</ahi-tree-item>
<ahi-tree-item>
<ahi-icon name="file-type-xls"></ahi-icon>
3.xls
</ahi-tree-item>
</ahi-tree-item>
</ahi-tree-item>
</ahi-tree>
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/tree/tree.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/tree/tree.js';Slots
| Name | Description |
|---|---|
| (default) | The default slot. |
expand-icon
|
The icon to show when the tree item is expanded. Works best with <ahi-icon>.
|
collapse-icon
|
The icon to show when the tree item is collapsed. Works best with <ahi-icon>.
|
Learn more about using slots.
Properties
| Name | Description | 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. |
Learn more about properties and attributes.
Events
| Name | Description | Event Detail |
|---|---|---|
ahi-selection-change |
Emitted when a tree item is selected or deselected. |
{ selection: AhiTreeItem[] }
|
Learn more about events.
Custom Properties
| Name | Description | Default |
|---|---|---|
--indent-size |
The size of the indentation for nested items. | var(–ahi-space-4) |
--indent-guide-color |
The color of the indentation line. | var(–ahi-divider) |
--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 |
Learn more about customizing CSS custom properties.
CSS Parts
| Name | Description |
|---|---|
base |
Deprecated. Use the tree part instead. |
tree |
The component’s outer wrapper. |
Learn more about customizing CSS parts.