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
• 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

Description	Defines if the group is collapsed or expanded.
Type	boolean
Default	false

titleText

Description	Defines the titleText of the item.
Type	string | undefined
Default	undefined

read

Description	Defines 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.
Type	boolean
Default	false

loading

Description	Defines if a busy indicator would be displayed over the item.
Type	boolean
Default	false
Since	1.0.0-rc.8

loadingDelay

Description	Defines the delay in milliseconds, after which the busy indicator will show up for this component.
Type	number
Default	1000

Slots

default

Description	Defines the items of the ui5-li-notification-group, usually ui5-li-notification items.
Type	Array<NotificationListItemBase>

Events

toggle

Description	Fired when the ui5-li-notification-group is expanded/collapsed by user interaction.
Type	CustomEvent

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.