Open navigation
Documentation See also iziModal.js

IZITOAST v1.1.5

Elegant, responsive, flexible and lightweight notification plugin with no dependencies.

examples
Star Download

A plugin for perky developers.

Changelog

All modern browsers are supported. (Tested in Chrome, Firefox, Opera, Safari, IE10+ and Edge).

Bugs or suggestions for improvements? create a issue here.

1.1.5 (Updated on 07/18/2017)

  • new Html structure improving - Implemented

  • bug Css min height of toast - Fixed

  • bug Corrected nomenclature in new event function - Fixed

  • bug Condition of showing progress bar or not - Fixed

1.1.4

  • bug Progress Bar resetOnHover - Fixed

1.1.2 / 1.1.3

  • new toastOnce option - Implemented

  • new Info Icon and icons for the Dark theme - Implemented

  • new Theme option (light or dark) - Implemented

  • new options onOpening, onOpened, onClosing and onClosed - Implemented

  • new Listeners iziToast-opening/opened/closing/closed - Implemented

  • new id option - Implemented

  • new maxWidth option - Implemented

  • new Multiple classes in the option - Implemented

  • new FontSize and LineHeight options for title and message - Implemented

  • new Improvements in Listener iziToast-opening/opened/closing/closed (ClosedBy and all other toast settings) - Implemented

  • new CustomEvent polyfill - Implemented

  • bug Incompatibility with iziModal animations - Fixed

  • bug RTL alignments - Fixed

  • bug Balloon Toast arrow color does not change when a background is set - Fixed

1.1.0 / 1.1.1

  • new Drag/Touch support - Implemented

  • new ClosedBy param ('drag' or 'button') - Implemented

  • new Targetfirst option - Implemented

  • new Background & message color options - Implemented

  • new Write HTML elements in toast messages - Implemented

  • bug Leap in animation when used Target - Fixed

  • bug zIndex, unexpected behavior - Fixed

  • bug box-shadow of balloon toast with progressBar not applied correctly - Fixed

1.0.2

  • new Original stylus source files - Implemented

  • new Folder structure - Modified

  • new Larger zIndex and Option to set it - Implemented

  • bug Flip animation - Fixed

  • bug Wrong positioning of internal elements - Fixed

1.0.1

  • new Internet Explorer 10+ support - Implemented



Start

NPMinstall

                        npm install izitoast --save
                    

Bowerinstall

                        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.


Options

Default Options (44)

                        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: '',
                            image: '',
                            imageWidth: 50,
                            maxWidth: null,
                            zindex: null,
                            layout: 1,
                            balloon: false,
                            close: true,
                            rtl: false,
                            position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                            target: '',
                            targetFirst: true,
                            toastOnce: false,
                            timeout: 5000,
                            drag: true,
                            pauseOnHover: true,
                            resetOnHover: false,
                            progressBar: true,
                            progressBarColor: '',
                            animateInside: true,
                            buttons: {},
                            transitionIn: 'fadeInUp',
                            transitionOut: 'fadeOut',
                            transitionInMobile: 'fadeInUp',
                            transitionOutMobile: 'fadeOutDown',
                            onOpening: function () {},
                            onOpened: function () {},
                            onClosing: function () {},
                            onClosed: function () {}
                        });
                        

Argument
Default value
Description
class '' The class that will be applied to the toast. It may be used as a reference.
title '' Title of the toast.
titleColor '' Title color.
titleSize new '' Title fontSize.
titleLineHeight new '' Title lineHeight.
message '' Message of notification.
messageColor '' Message color.
messageSize new '' Message fontSize.
messageLineHeight new '' Message lineHeight.
backgroundColor '' Background color of the Toast
theme '' It can be light or dark or set another class. Create and use like this ".iziToast-theme-name"
color '' It can be #hexadecimal, pre-defined themes like blue, red, green and yellow or set another class. Create and use like this ".iziToast-color-name"
icon '' Icon class (font-icon of your choice, Icomoon, Fontawesome etc.).
iconText '' Icon text (font-icon using text, Material Icons, etc.).
iconColor '' Icon color.
image '' Cover image. Example
imageWidth 50 Width of cover image. Example 100px
maxWidth new null set maxWidth of toast. Example 500px
zindex 99999 The z-index CSS attribute of the toast
layout 1 Example Small e Example Medium. It can be 1 or 2, or use another layout, creating the class like this: ".iziToast-layout3"
balloon false Applies a balloon like toast. Example.
close true Show "x" close button
rtl false RTL option
position 'bottomRight' Where it will be shown. It can be bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter or center.
target '' Fixed place where you want to show the toasts. Example
targetFirst true Add toast to first position.
toastOnce new false Waits for another toast to be closed on 'onClosed' function. You'll need an ID to use it.
timeout 5000 Amount in milliseconds to close the toast or false to disable.
drag true Drag Feature. Is used to close the toast.
pauseOnHover true Pause the toast timeout while the cursor is on it. Example
resetOnHover false Reset the toast timeout while the cursor is on it. Example
progressBar true Enable timeout progress bar.
progressBarColor '' Progress bar color.
animateInside true Enable animations of elements in the toast. Example True and Example False.
buttons {} You can specify an array of buttons. Example
transitionIn 'fadeInUp' Default toast open animation. It can be: bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight or flipInX.
transitionOut 'fadeOut' Default toast close animation. It can be: fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
transitionInMobile 'fadeInUp' Default toast opening mobile transition.
transitionOutMobile 'fadeOutDown' Default toast closing mobile transition.
onOpening new function() {} Callback function triggered when opening the toast.
onOpened new function() {} Callback function triggered when onOpened the toast.
onClosing new function() {} Callback function triggered when closing the toast.
onClosed new function() {} Callback function triggered when closed the toast.

Methods

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).

                        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: [
                                ['', function (instance, toast) {
                                    alert("Hello world!");
                                }],
                                ['', function (instance, toast) {
                                    instance.hide({
                                        transitionOut: 'fadeOutUp',
                                        onClosing: function(instance, toast, closedBy){
                                            console.info('closedBy: ' + closedBy); //btn2
                                        }
                                    }, toast, 'close', 'btn2');
                                }]
                            ],
                            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('.toast');

                        iziToast.hide({
                            transitionOut: 'fadeOutUp'
                        }, toast);
                    

Destroy

Destroy all toasts.

                        iziToast.destroy();
                    

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

Info

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

Success

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

Warning

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

Error

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

Events

Open

Capture when the toast is opening.

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

                        document.addEventListener('iziToast-open', function(data){
                            if(data.settings.class == 'test'){ // data.detail will have all toast settings.
                                console.info('EventListener iziToast-open');
                            }
                        });
                    

Close

Capture when the toast is closing.

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

Made with by Marcelo Dolce.

Did you like it? Help to keep iziToast development alive.