Notifications
Usage
Import
npm i @finastra/notifications
In order to use the outlined versions of the Material Icons, for a better look, make sure to include
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
/>
import '@finastra/notifications';
import { UserNotification, UserNotificationType } from '@finastra/notifications/dist/src/notifications.models';
const notifications: UserNotification[] = [
{
id: '1',
type: UserNotificationType.SUCCESS,
state: 'new',
message: 'New success message',
source: 'all',
createdOn: new Date('2023-04-05T12:58:32.710Z')
},
{
id: '2',
type: UserNotificationType.WARNING,
state: 'read',
message: 'New warning message',
source: 'all',
createdOn: new Date('2023-04-05T13:12:32.710Z')
},
{ id: '3', type: UserNotificationType.ERROR, state: 'new', message: 'New error message', source: 'all' },
{ id: '4', type: UserNotificationType.INFO, state: 'read', message: 'New info message', source: 'all' },
{
id: '5',
type: UserNotificationType.SUCCESS,
state: 'new',
message: 'complex notification and very loooooooooooooooooooooooooooooooooooooooooooooooooooong',
source: 'all',
link: 'https://google.com/tenants',
createdOn: new Date('2023-04-05T16:19:25.442Z')
}
];
...
<fds-notifications .notifications=${notifications}></fds-notifications>Events
| Event | Description |
|---|---|
markonenotificationread |
emitted as a @CustomEvent when one notification should be marked as read, with event.detail.notificationId set |
markallnotificationsread |
emitted as a @CustomEvent when all notifications should be marked as read |
deleteonenotification |
emitted as a @CustomEvent when one notification should be deleted, with event.detail.notificationId
|
deleteallnotifications |
emitted as a @CustomEvent when all notifications should be deleted |
navigateto |
emitted as a @CustomEvent when one notification should redirect the user to an url, with event.detail.path set |
API
Properties
| Property | Attribute | Modifiers | Type | Default | Description |
|---|---|---|---|---|---|
newNotifications |
readonly | number |
|||
notifications |
notifications |
Array |
[] | An array of @UserNotification items to populate the component | |
tippyOptions |
{ touch: boolean; theme: string; } |
{"touch":false,"theme":"finastra"} |
Events
| Event | Type | Description |
|---|---|---|
deleteallnotifications |
emitted as a | |
deleteonenotification |
CustomEvent<{ notificationId: string; }> |
emitted as a |
markallnotificationsread |
emitted as a | |
markonenotificationread |
CustomEvent<{ notificationId: string; }> |
emitted as a |
navigateto |
CustomEvent<{ path: string; }> |
emitted as a |