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 should be used inside a ui5-notification-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

growing

Description	Defines 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" (value descriptions in: NotificationListGrowingMode)
Default	"None"
Since	2.2.0

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

Events

toggle

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

load-more

Description	Fired when additional items are requested.
Type	CustomEvent
Since	2.2.0
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

CSS Custom States

No CSS custom states available for this component.