The ui5-tree-item represents a node in a tree structure, shown as a ui5-list.
This is the item to use inside a ui5-tree.
You can represent an arbitrary tree structure by recursively nesting tree items.
ES6 Module Import
import "@ui5/webcomponents/dist/TreeItem.js";
Properties
text
| Description | Defines the text of the tree item. |
| Type | string |
| Default | "" |
additionalText
| Description | Defines the additionalText, displayed in the end of the tree item. |
| Type | string |
| Default | "" |
| Since | 1.0.0-rc.15 |
icon
| Description | If set, an icon will be displayed before the text of the tree list item. |
| Type | string |
| Default | "" |
expanded
| Description | Defines whether the tree list item will show a collapse or expand icon inside its toggle button. |
| Type | boolean |
| Default | false |
indeterminate
| Description | Defines whether the selection of a tree node is displayed as partially selected.
Note: The indeterminate state can be set only programmatically and can’t be achieved by user interaction, meaning that the resulting visual state depends on the values of the indeterminate and selected properties:
- If a tree node has both selected and indeterminate set to true, it is displayed as partially selected.
- If a tree node has selected set to true and indeterminate set to false, it is displayed as selected.
- If a tree node has selected set to false, it is displayed as not selected regardless of the value of the indeterminate property.
Note: This property takes effect only when the ui5-tree is in MultiSelect mode. |
| Type | boolean |
| Default | false |
| Since | 1.1.0 |
hasChildren
| Description | Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.
Note: This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons. Set this to true for nodes you intend to load lazily, when the user clicks the expand button. It is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway. |
| Type | boolean |
| Default | false |
additionalTextState
| Description | Defines the state of the additionalText.
Available options are: "None" (by default), "Success", "Warning", "Information" and "Error". |
| Type | "None" | "Success" | "Warning" | "Error" | "Information" |
| Default | "None" |
| Since | 1.0.0-rc.15 |
accessibleName
| Description | Defines the accessible name of the component. |
| Type | string |
| Default | "" |
| Since | 1.8.0 |
type
| Description | Defines the visual indication and behavior of the list items. Available options are Active (by default), Inactive, Detail and Navigation.
Note: When set to Active or Navigation, the item will provide visual response upon press and hover, while with type Inactive and Detail - will not. |
| Type | "Inactive" | "Active" | "Detail" | "Navigation" |
| Default | "Active" |
accessibilityAttributes
| Description | An object of strings that defines several additional accessibility attribute values for customization depending on the use case.
It supports the following fields:
- ariaSetsize: Defines the number of items in the current set of listitems or treeitems when not all items in the set are present in the DOM. The value of each aria-setsize is an integer reflecting number of items in the complete set.
Note: If the size of the entire set is unknown, set aria-setsize="-1".
- ariaPosinset: Defines an element's number or position in the current set of listitems or treeitems when not all items are present in the DOM. The value of each aria-posinset is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. |
| Type | AccessibilityAttributes |
| Default | |
| Since | 1.15.0 |
navigated
| Description | The navigated state of the list item. If set to true, a navigation indicator is displayed at the end of the list item. |
| Type | boolean |
| Default | false |
| Since | 1.10.0 |
| Description | Defines the text of the tooltip that would be displayed for the list item. |
| Type | string |
| Default | "" |
| Since | 1.23.0 |
highlight
| Description | Defines the highlight state of the list items. Available options are: "None" (by default), "Success", "Warning", "Information" and "Error". |
| Type | "None" | "Success" | "Warning" | "Error" | "Information" |
| Default | "None" |
| Since | 1.24 |
selected
| Description | Defines the selected state of the ListItem. |
| Type | boolean |
| Default | false |
Slots
default
| Description | Defines the items of the component.
Note: Use ui5-tree-item or ui5-tree-item-custom |
| Type | Array<TreeItemBase> |
| Description | Defines the delete button, displayed in "Delete" mode. Note: While the slot allows custom buttons, to match design guidelines, please use the ui5-button component. Note: When the slot is not present, a built-in delete button will be displayed. |
| Type | Array<IButton> |
| Since | 1.9.0 |
Events
detail-click
| Description | Fired when the user clicks on the detail button when type is Detail. |
| Type | CustomEvent |
Methods
toggle
| Description | Call this method to manually switch the expanded state of a tree item. |
| Return type | void |
CSS Parts
| Name | Description |
|---|
| title | Used to style the title of the tree list item |
| additionalText | Used to style the additionalText of the tree list item |
| icon | Used to style the icon of the tree list item |