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
Priority
icon to display the priority of the group
TitleText
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.