Welcome folks today in this blog post we will be looking at an izitoast open source toast notification library. All the examples will be given below.
Installation
In order to install this library we can include it by cdn
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.css"/> |
javascript
|
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script> |
Now we can also use this as npm dependency
npm i izitoast
Basic Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>Currency Converter in Javascript</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css" /> </head> <body> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script> <script> iziToast.show({ title: 'Hey', message: 'What would you like to add?' }); </script> </html> |
Default Options
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
iziToast.show({ id: null, class: '', title: '', titleColor: '', titleSize: '', titleLineHeight: '', message: '', messageColor: '', messageSize: '', messageLineHeight: '', backgroundColor: '', theme: 'light', // dark color: '', // blue, red, green, yellow icon: '', iconText: '', iconColor: '', iconUrl: null, image: '', imageWidth: 50, maxWidth: null, zindex: null, layout: 1, balloon: false, close: true, closeOnEscape: false, closeOnClick: false, displayMode: 0, // once, replace position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center target: '', targetFirst: true, timeout: 5000, rtl: false, animateInside: true, drag: true, pauseOnHover: true, resetOnHover: false, progressBar: true, progressBarColor: '', progressBarEasing: 'linear', overlay: false, overlayClose: false, overlayColor: 'rgba(0, 0, 0, 0.6)', transitionIn: 'fadeInUp', transitionOut: 'fadeOut', transitionInMobile: 'fadeInUp', transitionOutMobile: 'fadeOutDown', buttons: {}, inputs: {}, onOpening: function () {}, onOpened: function () {}, onClosing: function () {}, onClosed: function () {} }); |
Dark theme and colorful alert notifications
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>Currency Converter in Javascript</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css" /> </head> <body> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script> <script> iziToast.show({ title: 'Hey', message: 'What would you like to add?', color:"red", theme:"dark", messageColor:'black' }); </script> </html> |
Success Notification Example
|
1 2 3 4 |
iziToast.success({ title: 'OK', message: 'Successfully inserted record!', }); |
Error Alert Notification
|
1 2 3 4 |
iziToast.error({ title: 'Error', message: 'Illegal operation', }); |
Warning Alert Notification
|
1 2 3 4 |
iziToast.warning({ title: 'Caution', message: 'You forgot important data', }); |
Info Alert Notification
|
1 2 3 4 |
iziToast.info({ title: 'Hello', message: 'Welcome!', }); |
Question Alert Notification
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
iziToast.question({ timeout: 20000, close: false, overlay: true, displayMode: 'once', id: 'question', zindex: 999, title: 'Hey', message: 'Are you sure about that?', position: 'center', buttons: [ ['<button><b>YES</b></button>', function (instance, toast) { instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); }, true], ['<button>NO</button>', function (instance, toast) { instance.hide({ transitionOut: 'fadeOut' }, toast, 'button'); }], ], onClosing: function(instance, toast, closedBy){ console.info('Closing | closedBy: ' + closedBy); }, onClosed: function(instance, toast, closedBy){ console.info('Closed | closedBy: ' + closedBy); } }); |
User Input Alert
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
iziToast.info({ timeout: 20000, overlay: true, displayMode: 'once', id: 'inputs', zindex: 999, title: 'Inputs', message: 'Examples', position: 'center', drag: false, inputs: [ ['<input type="checkbox">', 'change', function (instance, toast, input, e) { console.info(input.checked); }], ['<input type="text">', 'keyup', function (instance, toast, input, e) { console.info(input.value); }, true], ['<input type="number">', 'keydown', function (instance, toast, input, e) { console.info(input.value); }], ] }); |
