Tree
Calcite Trees are nestable, expandable text groups that can contain multiple links for navigation or items for filtering.
Overview
Tree can be used as a filtering component, navigation, or for use in form selection. They are built like a "family tree" in that there are parents, children, grand children, and great grand children. Parents can expand or collapse to show/hide more items.
Usage
- Side navigation
- Filtering
- Form selection
Sample
Edit sample on Codepen
Best practices
Below are important guidelines on using the Tree component.
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Arrow left | If item has subitems, collapse |
Arrow right | If item has subitems, expand |
Arrow top | Move focus to previous item. If the current focus is the first item, the focus will not change |
Arrow bottom | Move focus to previous item. If the current focus is the first item, the focus will exit the component |
Tab | Move focus to next item. If the current focus is the last item, the focus will exit the component |
Tab and Shift | Move focus to previous item. If the current focus is the first item, the focus will not change |
Enter | Toggle (expand/collapse) currently focused item |
Writing and copy
API reference
calcite-tree
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| inputEnabled | input-enabled | Display input | truefalse | |
| lines | lines | Display indentation guide lines. | truefalse | |
| scale | scale | Specify the scale of the tree. | lm (default)s | |
| selectionMode | selection-mode | Customize how tree selection works. |
Events
| Name | Description | Detail |
|---|---|---|
| calciteTreeSelect | Emits when the user selects/deselects tree items. An object including an array of selected items will be passed in the event's "detail" property. | TreeSelectDetail |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for `calcite-tree-item` elements. |