Skip to main content

NotificationListGroupItem

<ui5-li-notification-group> | Since 1.0.0-rc.8

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
  • TitleText to entitle the group
  • Items of the group

Usage​

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

Keyboard Handling​

The ui5-li-notification-group provides advanced keyboard handling. This component provides fast navigation when the header is focused using the following keyboard shortcuts:

  • [Space] - toggles expand / collapse of the group
  • [Plus] - expands the group
  • [Minus] - collapses the group
  • [Right] - expands the group
  • [Left] - collapses the group

ES6 Module Import​

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

Properties​

collapsed​

DescriptionDefines if the group is collapsed or expanded.
Typeboolean
Defaultfalse

growing​

DescriptionDefines whether the component will have growing capability by pressing a More button. When button is pressed load-more event will be fired.
Type"Button" | "None"
Default"None"
Since2.2.0

titleText​

DescriptionDefines the titleText of the item.
Typestring | undefined
Defaultundefined

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

loading​

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

loadingDelay​

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

Slots​

default​

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

Events​

toggle​

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

load-more​

DescriptionFired when additional items are requested.
TypeCustomEvent
Since2.2.0
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.