ListItemCustom
<ui5-li-custom>
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
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 |
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 | 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 |
Slots
default
| Description | Defines the content of the component. |
| Type | Array<Node> |
| 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 |
| Bubbles | Yes |
| Cancelable | No |
Methods
No methods available for this component.
CSS Parts
| Name | Description |
|---|
| 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 |