The ui5-tree
component provides a tree structure for displaying data in a hierarchy.
When to use:​
To display hierarchically structured items.
To select one or more items out of a set of hierarchically structured items.
When not to use:​
To display items not hierarchically structured. In this case, use the List component.
To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.
The hierarchy turns out to have only two levels. In this case, use List with group items.
Keyboard Handling​
The ui5-tree
provides advanced keyboard handling.
The user can use the following keyboard shortcuts in order to navigate trough the tree:
[Up] or [Down] - Navigates up and down the tree items that are currently visible.
[Right] - Drills down the tree by expanding the tree nodes.
[Left] - Goes up the tree and collapses the tree nodes.
The user can use the following keyboard shortcuts to perform selection,
when the mode
property is in use:
[Space] - Selects the currently focused item upon keyup.
[Enter] - Selects the currently focused item upon keydown.
ES6 Module Import​
import "@ui5/webcomponents/dist/Tree.js";
import "@ui5/webcomponents/dist/TreeItem.js";
Basic Sample​
Download Open in Playground Edit
Properties​
Description Defines the mode of the component. Since the tree uses a ui5-list
to display its structure, the tree modes are exactly the same as the list modes, and are all applicable. Type "None" | "SingleSelect" | "SingleSelectBegin" | "SingleSelectEnd" | "SingleSelectAuto" | "MultiSelect" | "Delete"
Default "None"
noDataText​
Description Defines the text that is displayed when the component contains no items. Type string
Default ""
Description Defines the component header text.Note: If the header
slot is set, this property is ignored. Type string
Default ""
Description Defines the component footer text. Type string
Default ""
accessibleName​
Description Defines the accessible name of the component. Type string
Default "" Since 1.8.0
accessibleNameRef​
Description Defines the IDs of the elements that label the component. Type string
Default "" Since 1.8.0
default​
Description Defines the items of the component. Tree items may have other tree items as children.Note: Use ui5-tree-item
for the intended design. Type Array<TreeItemBase>
Description Defines the component header.Note: When the header
slot is set, the headerText
property is ignored. Type Array<HTMLElement>
item-toggle​
Description Fired when a tree item is expanded or collapsed.Note: You can call preventDefault()
on the event object to suppress the event, if needed. This may be handy for example if you want to dynamically load tree items upon the user expanding a node. Even if you prevented the event's default behavior, you can always manually call toggle()
on a tree item. Type CustomEvent<TreeItemToggleEventDetail>
Parameters item : HTMLElement
the toggled item.
item-mouseover​
Description Fired when the mouse cursor enters the tree item borders. Type CustomEvent<TreeItemMouseoverEventDetail>
Parameters item : HTMLElement
the hovered item.Since 1.0.0-rc.16
item-mouseout​
Description Fired when the mouse cursor leaves the tree item borders. Type CustomEvent<TreeItemMouseoutEventDetail>
Parameters item : HTMLElement
the hovered item.Since 1.0.0-rc.16
item-click​
Description Fired when a tree item is activated. Type CustomEvent<TreeItemClickEventDetail>
Parameters item : HTMLElement
The clicked item.
item-delete​
Description Fired when the Delete button of any tree item is pressed.Note: A Delete button is displayed on each item, when the component mode
property is set to Delete
. Type CustomEvent<TreeItemDeleteEventDetail>
Parameters item : HTMLElement
the deleted item.
selection-change​
Description Fired when selection is changed by user interaction in SingleSelect
, SingleSelectBegin
, SingleSelectEnd
and MultiSelect
modes. Type CustomEvent<TreeSelectionChangeEventDetail>
Parameters selectedItems : Array
An array of the selected items.previouslySelectedItems : Array
An array of the previously selected items.targetItem : HTMLElement
The item triggering the event.
Methods​
Description Perform Depth-First-Search walk on the tree and run a callback on each node Return type void
Parameters callback : WalkCallback
function to execute on each node of the tree with 3 arguments: the node, the level and the index
CSS Parts​
No CSS parts available for this component.
More Samples​
Custom Tree Items​
Download Open in Playground Edit