Skip to main content

NotificationListItem

The ui5-li-notification is a type of list item, meant to display notifications.

The component has a rich set of various properties that allows the user to set avatar, titleText, descriptive content and footnotes to fully describe a notification.

The user can:

  • display a Close button
  • can control whether the titleText and description should wrap or truncate and display a ShowMore button to switch between less and more information
  • add custom actions by using the ui5-notification-action component

Usage​

The component can be used in a standard ui5-list.

ES6 Module Import​

import "@ui5/webcomponents/dist/NotificationListItem.js";

import "@ui5/webcomponents/dist/NotificationAction.js"; (optional)

Basic Sample​

Properties​

wrappingType​

DescriptionDefines if the titleText and description should wrap, they truncate by default.
Note: by default the titleText and description, and a ShowMore/Less button would be displayed.
Type"None" | "Normal"
Default"None"
Since1.0.0-rc.15

titleText​

DescriptionDefines the titleText of the item.
Typestring
Default""

priority​

DescriptionDefines the priority of the item.
Type"High" | "Medium" | "Low" | "None"
Default"None"

showClose​

DescriptionDefines if the close button would be displayed.
Typeboolean
Defaultfalse

read​

DescriptionDefines if the notification is new or has been already read.
Note: if set to false the titleText has bold font, if set to true - it has a normal font.
Typeboolean
Defaultfalse

busy​

DescriptionDefines if a busy indicator would be displayed over the item.
Typeboolean
Defaultfalse
Since1.0.0-rc.8

busyDelay​

DescriptionDefines the delay in milliseconds, after which the busy indicator will show up for this component.
Typenumber
Default1000

selected​

DescriptionDefines the selected state of the ListItem.
Typeboolean
Defaultfalse

Slots​

avatar​

DescriptionDefines the avatar, displayed in the ui5-li-notification.
Note: Consider using the ui5-avatar to display icons, initials or images.
Note: In order to be complaint with the UX guidlines and for best experience, we recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the ui5-avatar you can set its size property to XS to get the required size - <ui5-avatar size="XS"></ui5-avatar>.
TypeArray<HTMLElement>

footnotes​

DescriptionDefines the elements, displayed in the footer of the of the component.
TypeArray<HTMLElement>

default​

DescriptionDefines the content of the ui5-li-notification, usually a description of the notification.
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
TypeArray<Node>

actions​

DescriptionDefines the actions, displayed in the top-right area.
Note: use the ui5-notification-action component.
TypeArray<NotificationAction>

Events​

close​

DescriptionFired when the Close button is pressed.
TypeCustomEvent<NotificationListItemBaseCloseEventDetail>
Parametersitem: HTMLElement
the closed item.

Methods​

No methods available for this component.

CSS Parts​

NameDescription
title-textUsed to style the titleText of the notification list item

More Samples​

Notification Actions​

The sample demonstrates the usage of the ui5-notification-action. The actions are displayed just before the close/dismiss button and can overflow if many actions are used.

Notifcations in ShellBar​

The main usage of the Notifcations is in the ShellBar.