Skip to main content

NotificationListGroupItem

The ui5-li-notification-group is a special type of list item, that unlike others can group items within self, usually ui5-li-notification items.

The component consists of:

  • Toggle button to expand and collapse the group
  • Priority icon to display the priority of the group
  • TitleText to entitle the group
  • Custom actions - with the use of ui5-notification-action
  • Items of the group

Usage​

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

ES6 Module Import​

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

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

Basic Sample​

Properties​

collapsed​

DescriptionDefines if the group is collapsed or expanded.
Typeboolean
Defaultfalse

showCounter​

DescriptionDefines if the items counter would be displayed.
Typeboolean
Defaultfalse

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​

default​

DescriptionDefines the items of the ui5-li-notification-group, usually ui5-li-notification items.
TypeArray<NotificationListItemBase>

actions​

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

Events​

toggle​

DescriptionFired when the ui5-li-notification-group is expanded/collapsed by user interaction.
TypeCustomEvent

close​

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

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Notifcations in ShellBar​

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