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 groupPriority icon to display the priority of the groupTitleText to entitle the group- Custom actions - with the use of
ui5-notification-action
- Items of the group
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​
| Description | Defines if the group is collapsed or expanded. |
| Type | boolean |
| Default | false |
showCounter​
| Description | Defines if the items counter would be displayed. |
| Type | boolean |
| Default | false |
titleText​
| Description | Defines the titleText of the item. |
| Type | string |
| Default | "" |
priority​
| Description | Defines the priority of the item. |
| Type | "High" | "Medium" | "Low" | "None" |
| Default | "None" |
showClose​
| Description | Defines if the close button would be displayed. |
| Type | boolean |
| Default | false |
| 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 |
| Description | Defines if a busy indicator would be displayed over the item. |
| Type | boolean |
| Default | false |
| Since | 1.0.0-rc.8 |
busyDelay​
| Description | Defines the delay in milliseconds, after which the busy indicator will show up for this component. |
| Type | number |
| Default | 1000 |
selected​
| Description | Defines the selected state of the ListItem. |
| Type | boolean |
| Default | false |
default​
| Description | Defines the items of the ui5-li-notification-group, usually ui5-li-notification items. |
| Type | Array<NotificationListItemBase> |
actions​
| Description | Defines the actions, displayed in the top-right area.
Note: use the ui5-notification-action component. |
| Type | Array<NotificationAction> |
| Description | Fired when the ui5-li-notification-group is expanded/collapsed by user interaction. |
| Type | CustomEvent |
| Description | Fired when the Close button is pressed. |
| Type | CustomEvent<NotificationListItemBaseCloseEventDetail> |
| Parameters | item: 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.