Skip to main content

CustomListItem

A component to be used as custom list item within the ui5-list the same way as the standard ui5-li.

The component accepts arbitrary HTML content to allow full customization.

Properties​

accessibleName​

DescriptionDefines the text alternative of the component.
Note: If not provided a default text alternative will be set, if present.
Typestring
Default""
Since1.0.0-rc.15

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​

default​

DescriptionDefines the content of the component.
TypeArray<Node>

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​

No methods available for this component.

CSS Parts​

NameDescription
native-liUsed to style the main li tag of the list item
contentUsed to style the content area of the list item
detail-buttonUsed to style the button rendered when the list item is of type detail
delete-buttonUsed to style the button rendered when the list item is in delete mode
radioUsed to style the radio button rendered when the list item is in single selection mode
checkboxUsed to style the checkbox rendered when the list item is in multiple selection mode