Author: | caroso1222 |
---|---|
Views Total: | 1,926 views |
Official Page: | Go to website |
Last Update: | June 9, 2021 |
License: | MIT |
Preview:

Description:
Notyf is a very small and simple-to-use JavaScript library used for display growl- and toast-style alert/success notification messages on the screen. Responsive, accessible and easy to use.
How to use it:
Load the Notyf’s JavaScript and Stylesheet in the html document.
<link href="dist/notyf.min.css" rel="stylesheet"> <script src="dist/notyf.min.js"></script>
Create a new Notyf instance and we’re ready to go.
var notyf = new Notyf();
The JavaScript to show an alert notification.
notyf.alert('Alert Message');
The JavaScript to show a success notification.
notyf.confirm('Success Message');
Possible options.
var notyf = new Notyf({ // delay time // 0 = infinite duration duration:2000, // enable ripple effect ripple: true, // custom position position: {x:'right',y:'bottom'}, // allow users to dismiss notifications via button dismissible: false, types: [ { type: 'warning', // Notification type duration: 2000, ripple: true, message: 'custom message' background: 'orange', className: '', extra CSS class icon: { className: 'material-icons', tagName: 'i', text: 'warning' } } ] });
Dismiss all notifications.
notyf.dismissAll();
Changelog:
v3.10.0 (06/09/2021)
- Allow icons as HTML markup.
v3.9.0 (07/24/2020)
- Add support for UMD bundles.
v3.8.0 (07/13/2020)
- add icon color option
v3.7.0 (05/09/2020)
- add dismiss functionality for single notification
v3.6.0 (04/07/2020)
- Allow duration=0 to specify infinite duration
v3.5.1 (04/03/2020)
- Fixed compatibility issues with IE11.
v3.5.0 (03/31/2020)
- Replace ‘backgroundColor’ with ‘background’.
v3.4.0 (03/28/2020)
- Allow users to dismiss all notifications
v3.3.0 (03/27/2020)
- Allow users to dismiss notifications via button
v3.2.0 (03/26/2020)
- Allow custom notification positioning
v3.1.0 (10/30/2019)
- Allow multiple class names
v3.0.0 (03/20/2019)
- Improve a11y support with the new a11y announcer
- Implement a more extensible, yet simple and scalable API
- Complete up to date TypeScript typings
- Migrate codebase to TypeScript
- Add appropriate support for module bundlers by exposing different artifacts (ES6, CommonJS, minified IIFE)
- Add e2e tests with Cypress
- Move to Rollup for the build workflow
- Rename delay for duration
- Rename alert for error
- Rename confirm for success
- Remove option confirmIcon
- Remove option alertIcon
- Drop support for Bower
v2.0.1 (05/30/2018)
- Add entry point for CommonJS require. Now Notyf can be imported as var Notyf = require(‘notyf’)