Author: | ArthurBeaulieu |
---|---|
Views Total: | 1,214 views |
Official Page: | Go to website |
Last Update: | October 16, 2020 |
License: | MIT |
Preview:

Description:
An open-source JavaScript (ES 6) notification library to display customizable, toast-like, non-blocking, crossfading notification popups with different types on the screen.
How to use it:
1. Load the necessary stylesheet notification.min.css in the document.
<link rel="stylesheet" href="./dist/notification.min.css" />
2. Import the Notification.js.
import Notification from './src/Notification.js';
3. Initialize the Notification.js with default configs.
window.notification = new Notification();
4. Send custom notification messages to users.
notification.success({ message: 'Success notification' }); notification.info({ message: 'Info notification' }); notification.warning({ message: 'Warning notification' }); notification.error({ message: 'Error notification' });
5. Customize the notification.
window.notification = new Notification({ // top-left, top-right, bottom-left, or bottom-right position: 'top-right', // left, right, top, bottom, or none thickBorder: 'top', // auto dimiss after 5000ms duration: 5000, // transition speed transition: 200, // max number of notifications maxActive: 10, // path to images imgPath: './img/' });
6. You can also create notification instances and customize the notification message as follows:
let instance = window.notification.new({ // success, info, warning, or error type: 'info', // title title: '', // message message: 'Lorem ipsum dolor sit amet.', // auto dismiss after this timeout duration: 5000, // hide icons iconless: false, // left, right, top, bottom, or none thickBorder: 'top', // is closable closable: true, // is always visible sticky: false, // where you want to place the notifications renderTo: document.body, // callback title CBtitle: 'My callback', // callback callback: function() { alert('Called from my notification'); } });
7. Dismiss all activate notifications.
window.notification.dismissAll();
Could you add a real example too, instead just the picture? Thank you for the comments in the middle. 🙂