Skip to main content

TreeItemCustom

The ui5-tree-item-custom 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.

You can use this item to put any custom content inside the tree item.

ES6 Module Import​

import "@ui5/webcomponents/dist/TreeItemCustom.js";

Properties​

hideSelectionElement​

DescriptionDefines whether the tree list item should display the selection element.
Typeboolean
Defaultfalse

icon​

DescriptionIf set, an icon will be displayed before the text of the tree list item.
Typestring
Default""

expanded​

DescriptionDefines whether the tree list item will show a collapse or expand icon inside its toggle button.
Typeboolean
Defaultfalse

indeterminate​

DescriptionDefines 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.
Typeboolean
Defaultfalse
Since1.1.0

hasChildren​

DescriptionDefines 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.
Typeboolean
Defaultfalse

additionalTextState​

DescriptionDefines the state of the additionalText.
Available options are: "None" (by default), "Success", "Warning", "Information" and "Error".
Type"None" | "Success" | "Warning" | "Error" | "Information"
Default"None"
Since1.0.0-rc.15

accessibleName​

DescriptionDefines the accessible name of the component.
Typestring
Default""
Since1.8.0

type​

DescriptionDefines 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​

DescriptionAn 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.
TypeAccessibilityAttributes
Default
Since1.15.0
DescriptionThe navigated state of the list item. If set to true, a navigation indicator is displayed at the end of the list item.
Typeboolean
Defaultfalse
Since1.10.0

tooltip​

DescriptionDefines the text of the tooltip that would be displayed for the list item.
Typestring
Default""
Since1.23.0

highlight​

DescriptionDefines 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"
Since1.24

selected​

DescriptionDefines the selected state of the ListItem.
Typeboolean
Defaultfalse

Slots​

content​

DescriptionDefines the content of the ui5-tree-item.
TypeArray<HTMLElement>

default​

DescriptionDefines the items of the component.
Note: Use ui5-tree-item or ui5-tree-item-custom
TypeArray<TreeItemBase>

deleteButton​

DescriptionDefines 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.
TypeArray<IButton>
Since1.9.0

Events​

detail-click​

DescriptionFired when the user clicks on the detail button when type is Detail.
TypeCustomEvent

Methods​

toggle​

DescriptionCall this method to manually switch the expanded state of a tree item.
Return typevoid

CSS Parts​

NameDescription
titleUsed to style the title of the tree list item
additionalTextUsed to style the additionalText of the tree list item
iconUsed to style the icon of the tree list item