The ui5-li-notification is a type of list item, meant to display notifications.
The component has a rich set of various properties that allows the user to set avatar, menu, titleText, descriptive content
and footnotes to fully describe a notification.
The user can:
- display a
Close button
- can control whether the
titleText and description should wrap or truncate
and display a ShowMore button to switch between less and more information
- add actions by using the
ui5-menu component
Note: Adding custom actions by using the ui5-notification-action component is deprecated as of version 2.0!
Usage
The component should be used inside a ui5-notification-list.
Keyboard Handling
Basic Navigation
The user can use the following keyboard shortcuts to perform actions (such as select, delete):
- [Enter] - select an item (trigger "item-click" event)
- [Delete] - close an item (trigger "item-close" event)
Fast Navigation
This component provides a fast navigation using the following keyboard shortcuts:
- [Shift] + [Enter] - 'More'/'Less' link will be triggered
- [Shift] + [F10] - 'Menu' (Actions) button will be triggered (clicked)
ES6 Module Import
import "@ui5/webcomponents-fiori/dist/NotificationListItem.js";
Properties
wrappingType
| Description | Defines if the titleText and description should wrap, they truncate by default.
Note: by default the titleText and description, and a ShowMore/Less button would be displayed. |
| Type | "None" | "Normal" (value descriptions in: WrappingType) |
| Default | "None" |
| Since | 1.0.0-rc.15 |
state
| Description | Defines the status indicator of the item. |
| Type | "None" | "Positive" | "Critical" | "Negative" | "Information" |
| Default | "None" |
showClose
| Description | Defines if the Close button would be displayed. |
| Type | boolean |
| Default | false |
importance
| Description | Defines the Important label of the item. |
| Type | "Standard" | "Important" (value descriptions in: NotificationListItemImportance) |
| Default | "Standard" |
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
avatar
| Description | Defines the avatar, displayed in the ui5-li-notification.
Note: Consider using the ui5-avatar to display icons, initials or images.
Note: In order to be complaint with the UX guidlines and for best experience, we recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the ui5-avatar you can set its size property to XS to get the required size - <ui5-avatar size="XS"></ui5-avatar>. |
| Type | Array<HTMLElement> |
| Description | Defines the menu, displayed in the ui5-li-notification.
Note: Use this for implementing actions.
Note: Should be used instead u5-notification-action, which is deprecated as of version 2.0. |
| Type | Array<HTMLElement> |
| Description | Defines the elements, displayed in the footer of the of the component. |
| Type | Array<HTMLElement> |
default
| Description | Defines the content of the ui5-li-notification, usually a description of the notification.
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. |
| Type | Array<Node> |
Events
close
| Description | Fired when the Close button is pressed. |
| Type | CustomEvent<NotificationListItemCloseEventDetail> |
| Parameters | item: HTMLElement
the closed item. |
| Bubbles | No |
| Cancelable | No |
Methods
No methods available for this component.
CSS Parts
For more information on how to use CSS shadow parts, see Usage of CSS Shadow Parts.
| Name | Description |
|---|
| title-text | Used to style the titleText of the notification list item |
CSS Custom States
No CSS custom states available for this component.