@finastra/notifications
v1.8.1
Published
Notifications Web Component
Downloads
4
Readme
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,[email protected],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 |