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​
Description | Defines the description displayed right under the item text, if such is present. |
Type | string | undefined |
Default | undefined |
Since | 0.8.0 |
Description | Defines the icon source URI. Note: SAP-icons font provides numerous built-in icons. To find all the available icons, see the Icon Explorer. |
Type | string | undefined |
Default | undefined |
iconEnd​
Description | Defines whether the icon should be displayed in the beginning of the list item or in the end. |
Type | boolean |
Default | false |
additionalText​
Description | Defines the additionalText , displayed in the end of the list item. |
Type | string | undefined |
Default | undefined |
Since | 1.0.0-rc.15 |
additionalTextState​
Description | Defines the state of the additionalText . Available options are: "None" (by default), "Positive" , "Critical" , "Information" and "Negative" . |
Type | "None" | "Positive" | "Critical" | "Negative" | "Information" |
Default | "None" |
Since | 1.0.0-rc.15 |
movable​
Description | Defines whether the item is movable. |
Type | boolean |
Default | false |
Since | 2.0.0 |
accessibleName​
Description | Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present. |
Type | string | undefined |
Default | undefined |
Since | 1.0.0-rc.15 |
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 | Defines 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. |
Type | ListItemAccessibilityAttributes |
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 | undefined |
Default | undefined |
Since | 1.23.0 |
highlight​
Description | Defines 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" |
Since | 1.24 |
selected​
Description | Defines the selected state of the component. |
Type | boolean |
Default | false |
default​
Description | Defines 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. |
Type | Array<Node> |
Description | Note: 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. |
Type | Array<HTMLElement> |
Since | 2.0.0 |
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 |
detail-click​
Description | Fired when the user clicks on the detail button when type is Detail . |
Type | CustomEvent |
Bubbles | Yes |
Cancelable | No |
Methods​
No methods available for this component.
CSS Parts​
Name | Description |
---|
title | Used to style the title of the list item |
description | Used to style the description of the list item |
additional-text | Used to style the additionalText of the list item |
icon | Used to style the icon of the list item |
native-li | Used to style the main li tag of the list item |
content | Used to style the content area of the list item |
detail-button | Used to style the button rendered when the list item is of type detail |
delete-button | Used to style the button rendered when the list item is in delete mode |
radio | Used to style the radio button rendered when the list item is in single selection mode |
checkbox | Used to style the checkbox rendered when the list item is in multiple selection mode |