The ui5-list component allows displaying a list of items, advanced keyboard
handling support for navigating between items, and predefined modes to improve the development efficiency.
The ui5-list is a container for the available list items:
ui5-li
ui5-li-custom
ui5-li-groupheader
To benefit from the built-in selection mechanism, you can use the available
selection modes, such as
SingleSelect, MultiSelect and Delete.
Additionally, the ui5-list provides header, footer, and customization for the list item separators.
The ui5-list provides advanced keyboard handling.
When a list is focused the user can use the following keyboard
shortcuts in order to perform a navigation:
[Up] or [Down] - Navigates up and down the items
[Home] - Navigates to first item
[End] - Navigates to the last item
The user can use the following keyboard shortcuts to perform actions (such as select, delete),
when the mode property is in use:
[Space] - Select an item (if type is 'Active') when mode is selection
[Delete] - Delete an item if mode property is Delete
This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
In order to use this functionality, you need to import the following module:
import "@ui5/webcomponents-base/dist/features/F6Navigation.js"
Defines whether the component will have growing capability either by pressing a More button, or via user scroll. In both cases load-more event is fired. Restrictions:growing="Scroll" is not supported for Internet Explorer, on IE the component will fallback to growing="Button".
Defines the text that will be displayed inside the growing button. Note: If not specified a built-in text will be displayed. Note: This property takes effect if the growing property is set to the Button.
Fired when the Close button of any item is clicked Note: This event is only applicable to list items that can be closed (such as notification list items), not to be confused with item-delete.
Fired when the Toggle button of any item is clicked. Note: This event is only applicable to list items that can be toggled (such as notification group list items).
Fired when the Delete button of any item is pressed. Note: A Delete button is displayed on each item, when the component mode property is set to Delete.
Fired when selection is changed by user interaction in SingleSelect, SingleSelectBegin, SingleSelectEnd and MultiSelect modes.
Type
CustomEvent<ListSelectionChangeEventDetail>
Parameters
selectedItems: Array<ListItemBase> An array of the selected items. previouslySelectedItems: Array<ListItemBase> An array of the previously selected items.
The List fires an load-more event when the user clicks to the "Load More" button at the bottom.
The event can be used for loading more data (items) as shown in the sample.