iziToast.js v1.5.0

NPM › install

                        npm install izitoast --save
                    

---

Bower › install

                        bower install izitoast
                    

HTML › Include the CSS files from the dist folder in the head section:

---

HTML › Include the JS file before the scripts

---

JS › Basic example

                        iziToast.show({
                            title: 'Hey',
                            message: 'What would you like to add?'
                        });
                    

---

ICONS › Tested and recommended

One need only incorporate the CSS of icons and use the corresponding class.

• Icomoon
• Fontawesome

Settings

is used to set default values.

                        iziToast.settings({
                            timeout: 10000,
                            resetOnHover: true,
                            icon: 'material-icons',
                            transitionIn: 'flipInX',
                            transitionOut: 'flipOutX',
                            onOpening: function(){
                                console.log('callback abriu!');
                            },
                            onClosing: function(){
                                console.log("callback fechou!");
                            }
                        });
                    

---

Show

Opens the toast. (Example with buttons).

Example

                        iziToast.show({
                            theme: 'dark',
                            icon: 'icon-person',
                            title: 'Hey',
                            message: 'Welcome!',
                            position: 'center', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter
                            progressBarColor: 'rgb(0, 255, 184)',
                            buttons: [
                                ['Ok', function (instance, toast) {
                                    alert("Hello world!");
                                }, true], // true to focus
                                ['Close', function (instance, toast) {
                                    instance.hide({
                                        transitionOut: 'fadeOutUp',
                                        onClosing: function(instance, toast, closedBy){
                                            console.info('closedBy: ' + closedBy); // The return will be: 'closedBy: buttonName'
                                        }
                                    }, toast, 'buttonName');
                                }]
                            ],
                            onOpening: function(instance, toast){
                                console.info('callback abriu!');
                            },
                            onClosing: function(instance, toast, closedBy){
                                console.info('closedBy: ' + closedBy); // tells if it was closed by 'drag' or 'button'
                            }
                        });
                    

---

Hide

Closes the specific toast.

                        var toast = document.querySelector('.iziToast'); // Selector of your toast

                        iziToast.hide({}, toast);
                        
                        // Or make new settings                
    
                        iziToast.hide({
                            transitionOut: 'fadeOutUp'
                        }, toast);

                    

---

Progress

Control progress bar time.

                        var toast = document.querySelector('.iziToast'); // Selector of your toast

                        iziToast.progress({}, toast).reset();  // Reset progress bar time

                        iziToast.progress({}, toast).pause();  // Pause progress bar time

                        iziToast.progress({}, toast).resume();  // Resume progress bar time

                        iziToast.progress({}, toast).start();  // Pause progress bar time

                        // Full example
                        iziToast.progress(options, toast, callback).start();
                    

---

Destroy

Destroy all toasts.

                        iziToast.destroy();
                    

You can use four predefined types that have icon and different colors.

Info

Example

                        iziToast.info({
                            title: 'Hello',
                            message: 'Welcome!',
                        });
                    

---

Success

Example

                        iziToast.success({
                            title: 'OK',
                            message: 'Successfully inserted record!',
                        });
                    

---

Warning

Example

                        iziToast.warning({
                            title: 'Caution',
                            message: 'You forgot important data',
                        });
                    

---

Error

Example

                        iziToast.error({
                            title: 'Error',
                            message: 'Illegal operation',
                        });
                    

---

Question

Example

                        
                        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: [
                                ['YES', function (instance, toast) {

                                    instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');

                                }, true],
                                ['NO', 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);
                            }
                        });
                    

---

Inputs

Example

                        iziToast.info({
                            timeout: 20000,
                            overlay: true,
                            displayMode: 'once',
                            id: 'inputs',
                            zindex: 999,
                            title: 'Inputs',
                            message: 'Examples',
                            position: 'center',
                            drag: false,
                            inputs: [
                                ['', 'change', function (instance, toast, input, e) {
                                    console.info(input.checked);
                                }],
                                ['', 'keyup', function (instance, toast, input, e) {
                                    console.info(input.value);
                                }, true],
                                ['', 'keydown', function (instance, toast, input, e) {
                                    console.info(input.value);
                                }],
                            ]
                        });
                    

Opening

Capture when the toast is opening.

                        // You can compare by any option (id, class, etc...)

                        document.addEventListener('iziToast-opening', function(data){

                            // data.detail will bring all toast settings.
                            
                            if(data.detail.class == 'test'){
                                console.info('EventListener iziToast-opening');
                            }
                        });
                    

---

Opened

Capture when the toast is opened.

                        document.addEventListener('iziToast-opened', function(data){
                            if(data.detail.class == 'test'){
                                console.info('EventListener iziToast-opened');
                            }
                        });
                    

---

Closing

Capture when the toast is closing.

                        document.addEventListener('iziToast-closing', function(data){
                            if(data.detail.class == 'test'){
                                console.info('EventListener iziToast-closing');
                            }
                        });
                    

---

Closed

Capture when the toast is closed.

                        document.addEventListener('iziToast-closed', function(data){
                            if(data.detail.class == 'test'){
                                console.info('EventListener iziToast-closed');
                                console.info('closedBy:', data.detail.closedBy);
                            }
                        });