Skip to main content

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​

Basic Navigation​

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

Fast Navigation​

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​

DescriptionDefines the text that is displayed when the component contains no items.
Typestring | undefined
Defaultundefined

Slots​

default​

DescriptionDefines the items of the component.
TypeArray<NotificationListItemBase>

Events​

item-click​

DescriptionFired when an item is clicked.
TypeCustomEvent<NotificationItemClickEventDetail>
Parametersitem: HTMLElement
The clicked item.
BubblesYes
CancelableYes - via preventDefault()

item-close​

DescriptionFired when the Close button of any item is clicked.
TypeCustomEvent<NotificationItemCloseEventDetail>
Parametersitem: HTMLElement
the item about to be closed.
BubblesYes
CancelableYes - via preventDefault()

item-toggle​

DescriptionFired when an item is toggled.
TypeCustomEvent<NotificationItemToggleEventDetail>
Parametersitem: HTMLElement
the toggled item.
BubblesYes
CancelableYes - via preventDefault()

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Notification List with Group Items​

Notifications in ShellBar​

The main usage of the Notifications is in the ShellBar. Press the "notifications" icon on the right side of the ShellBar to show the Notifications.