Author: | jsanahuja |
---|---|
Views Total: | 1,221 views |
Official Page: | Go to website |
Last Update: | August 29, 2020 |
License: | MIT |
Preview:

Description:
Notifier.js is an easy yet fully configurable push notification library to show toast and growl style messages in the bottom right corner of the page.
More Features:
- Allows you to attach the notifications to any container.
- 4 built-in themes: Success, Error, Warning, Info.
- Auto dismisses with a countdown bar.
- Allows you to create your own themes (styles).
How to use it:
1. Download & unzip the library and then load the minified version of the Notifier.js in the HTML file.
<link href="dist/Notifier.min.css" rel="stylesheet" /> <script src="dist/Notifier.min.js"></script>
2. Initialize the Norifier.js and we’re ready to go.
var notifier = new Notifier();
3. Create push notifications using built-in themes.
// Success var notification = notifier.notify("success", "<b>Success</b> Message"); notification.push(); // Info var notification = notifier.notify("info", "<b>Info</b> Message"); notification.push(); // Warning var notification = notifier.notify("warning", "<b>Warning</b> Message"); notification.push(); // Error var notification = notifier.notify("error", "<b>Error</b> Message"); notification.push();
4. Create your own notification types (themes).
var notifier = new Notifier({ "custom": { "classes": "my-class", "icon": "icon here" } });
notification = notifier.notify("custom", "<b>Custom</b> Message"); notification.push();
.notifyjs-container .notifyjs-notification.my-class { /* CSS Styles Here */ } .notifyjs-container .notifyjs-notification.my-class p.progress { /* CSS Styles Here */ } .notifyjs-container .notifyjs-notification.my-class.notifyjs-icon { /* CSS Styles Here */ }
5. Determine whether or not to auto push the notification. Default: true.
var notifier = new Notifier({ autopush: false });
6. Specify the timeout. Default: 4500ms.
var notifier = new Notifier({ default_time: 5000 });
7. Config the animation.
var notifier = new Notifier({ vanish_time: 300, fps: 30 });
8. Determine the position & direction.
var notifier = new Notifier({ // top-left, top-right, bottom-left and bottom-right position: 'bottom-right', // top, or bottom direction: 'bottom', });
9. Customize the CSS z-index property.
var notifier = new Notifier({ zindex: 9999 });
10. Override the default styles of the notification.
var notifier = new Notifier({ success: { classes: 'notifyjs-success', textColor: "#155724", borderColor: "#c3e6cb", backgroundColor: "#d4edda", progressColor: "#155724", iconColor: "#155724", // iconClasses: "", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path d="M6.41 0l-.69.72-2.78 2.78-.81-.78-.72-.72-1.41 1.41.72.72 1.5 1.5.69.72.72-.72 3.5-3.5.72-.72-1.44-1.41z" transform="translate(0 1)" /></svg>' }, error: { classes: 'notifyjs-danger', textColor: "#721c24", borderColor: "#f5c6cb", backgroundColor: "#f8d7da", progressColor: "#721c24", iconColor: "#721c24", // iconClasses: "", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path d="M1.41 0l-1.41 1.41.72.72 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z" /></svg>' }, warning: { classes: 'notifyjs-warning', textColor: "#856404", borderColor: "#fff3cd", backgroundColor: "#ffeeba", progressColor: "#856404", iconColor: "#856404", // iconClasses: "", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path d="M3.09 0c-.06 0-.1.04-.13.09l-2.94 6.81c-.02.05-.03.13-.03.19v.81c0 .05.04.09.09.09h6.81c.05 0 .09-.04.09-.09v-.81c0-.05-.01-.14-.03-.19l-2.94-6.81c-.02-.05-.07-.09-.13-.09h-.81zm-.09 3h1v2h-1v-2zm0 3h1v1h-1v-1z" /></svg>' }, info: { classes: 'notifyjs-info', textColor: "#0c5460", borderColor: "#d1ecf1", backgroundColor: "#bee5eb", progressColor: "#0c5460", iconColor: "#0c5460", // iconClasses: "", icon: '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path d="M3 0c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-1.5 2.5c-.83 0-1.5.67-1.5 1.5h1c0-.28.22-.5.5-.5s.5.22.5.5-1 1.64-1 2.5c0 .86.67 1.5 1.5 1.5s1.5-.67 1.5-1.5h-1c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-.36 1-1.84 1-2.5 0-.81-.67-1.5-1.5-1.5z" transform="translate(2)"/></svg>' } });
11. Dismiss all notifications.
notification.clear();
12. Destroy the library.
notification.destroy();
Changelog:
v1.2.4 (08/29/2020)
- Fixed type classes was not being applied
v1.2.2 (05/02/2020)
- Added z-index option
i could not locate the Notifier.min.css file in the dist folder, followed everything but nothing seems to work
It seems that the package has removed the stylesheet. However, you can add your own styles to the notifications as you’ve seen on the demo page.