Genesis Foundation UI Notifications


$3

* The App need to create notification-listener at top of the component tree.

* Any child under notification-listener component can dispatch custom NotificationEvent event

* The custom event is handled by notification-listener component and based on event payload
it displays notification component according to payload

$3

* Alert
* Toast
* Banner
* Snack bar
* Dialog

$3

Creating and dispatching Notification event with payload to show in Toast component

``javascript
$emit(
NotificationEvent.NOTIFICATION_EVENT,
{
title: 'Important message',
body: 'Lorem ipsum',
config: {
toast: {
autoClose: true,
closeTimeout: notificationCloseTimeout,
type: 'warning',
},
},
} as NotificationStructure,
)
`

$3

To create individual notifications of various types, there are functions that will allow you to display and provide the structure.

`javascript
showNotificationAlert({ title: 'Important message', body: 'Lorem ipsum' });
`

`javascript
showNotificationBanner(
{
body: 'Lorem ipsum',
banner: {
confirmingActions: [{ label: 'Confirm', action: () => console.log('Lorem ipsum') }],
dismissingAction: {
label: 'Dismiss',
action: () => console.log('Lorem ipsum'),
},
},
},
'zero',
);
`

`javascript
showNotificationDialog(
{
title: 'Important message',
body: 'Lorem ipsum',
dialog: {
confirmingActions: [{ label: 'Confirm', action: () => console.log('Lorem ipsum') }],
dismissingAction: {
label: 'Dismiss',
action: () => console.log('Lorem ipsum'),
},
},
},
'zero',
);
`

`javascript
showNotificationSnackbar(
{
body: 'Lorem ipsum',
snackbar: {
confirmingActions: [
{ label: 'Confirm', action: () => console.log('Lorem ipsum') },
],
type: 'error',
},
},
'zero',
);
`

`javascript
showNotificationToast(
{
title: 'Important message',
body: 'Lorem ipsum',
toast: {
autoClose: true,
closeTimeout: 3000,
type: 'success',
},
},
'zero',
);
`

Installation

To enable this module in your application, follow the steps below.

1. Add @genesislcap/foundation-notifications as a dependency in your package.json file. Whenever you change the dependencies of your project, ensure you run the $ npm run bootstrap command again. You can find more information in the package.json basics page.

`json
{
...
"dependencies": {
...
"@genesislcap/foundation-notifications": "latest"
...
},
...
}
``

API Docs

License

Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact Genesis Global for more details.

$3

Genesis low-code platform