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 groupTitleText 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.