Skip to main content

ListItemStandard

<ui5-li>

The ui5-li represents the simplest type of item for a ui5-list.

This is a list item, providing the most common use cases such as text, image and icon.

Properties​

description​

DescriptionDefines the description displayed right under the item text, if such is present.
Typestring | undefined
Defaultundefined
Since0.8.0

icon​

DescriptionDefines the icon source URI.
Note: SAP-icons font provides numerous built-in icons. To find all the available icons, see the Icon Explorer.
Typestring | undefined
Defaultundefined

iconEnd​

DescriptionDefines whether the icon should be displayed in the beginning of the list item or in the end.
Typeboolean
Defaultfalse

additionalText​

DescriptionDefines the additionalText, displayed in the end of the list item.
Typestring | undefined
Defaultundefined
Since1.0.0-rc.15

additionalTextState​

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

movable​

DescriptionDefines whether the item is movable.
Typeboolean
Defaultfalse
Since2.0.0

accessibleName​

DescriptionDefines the text alternative of the component. Note: If not provided a default text alternative will be set, if present.
Typestring | undefined
Defaultundefined
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​

DescriptionDefines the additional accessibility attributes that will be applied to the component. The following fields are supported:
- ariaSetsize: Defines the number of items in the current set when not all items in the set are present in the DOM. Note: The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set -1.
- ariaPosinset: Defines an element's number or position in the current set when not all items are present in the DOM. Note: The value 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.
TypeListItemAccessibilityAttributes
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 | undefined
Defaultundefined
Since1.23.0

highlight​

DescriptionDefines the highlight state of the list items. Available options are: "None" (by default), "Positive", "Critical", "Information" and "Negative".
Type"None" | "Positive" | "Critical" | "Negative" | "Information"
Default"None"
Since1.24

selected​

DescriptionDefines the selected state of the component.
Typeboolean
Defaultfalse

Slots​

default​

DescriptionDefines the text of the component.
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
TypeArray<Node>

image​

DescriptionNote: While the slot allows option for setting custom avatar, to match the design guidelines, please use the ui5-avatar with it's default size - S.
Note: If bigger ui5-avatar needs to be used, then the size of the ui5-li should be customized in order to fit.
TypeArray<HTMLElement>
Since2.0.0

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
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

NameDescription
titleUsed to style the title of the list item
descriptionUsed to style the description of the list item
additional-textUsed to style the additionalText of the list item
iconUsed to style the icon of the list item
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