NotificationList

<ui5-notification-list> | Since 2.0.0

The ui5-notification-list web component represents a container for ui5-li-notification-group and ui5-li-notification.

Keyboard Handling

The ui5-notification-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 [Left] - Navigates up the items
[Down] or [Right] - Navigates down the items
[Home] - Navigates to first item
[End] - Navigates to the last item

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"

ES6 Module Import

`import "@ui5/webcomponents-fiori/dist/NotificationList.js";``

Basic Sample

Properties

noDataText

Description	Defines the text that is displayed when the component contains no items.
Type	`string \| undefined`
Default	undefined

Slots

default

Description	Defines the items of the component.
Type	`Array<NotificationListItemBase>`

Events

item-click

Description	Fired when an item is clicked.
Type	`CustomEvent<NotificationItemClickEventDetail>`
Parameters	item: `HTMLElement` The clicked item.
Bubbles	Yes
Cancelable	Yes - via `preventDefault()`

item-close

Description	Fired when the `Close` button of any item is clicked.
Type	`CustomEvent<NotificationItemCloseEventDetail>`
Parameters	item: `HTMLElement` the item about to be closed.
Bubbles	Yes
Cancelable	Yes - via `preventDefault()`

item-toggle

Description	Fired when an item is toggled.
Type	`CustomEvent<NotificationItemToggleEventDetail>`
Parameters	item: `HTMLElement` the toggled item.
Bubbles	Yes
Cancelable	Yes - via `preventDefault()`

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

More Samples