Open navigation
Documentation See also iziModal.js

IZITOAST v1.1.2

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? create a issue here.

1.1.2 (beta)

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

  • new maxWidth option - 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 (38)

                        iziToast.show({
                            class: '',
                            title: '',
                            titleColor: '',
                            titleSize: '',
                            titleLineHeight: '',
                            message: '',
                            messageColor: '',
                            messageSize: '',
                            messageLineHeight: '',
                            backgroundColor: '',
                            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', //bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                            target: '',
                            targetFirst: true,
                            timeout: 5000,
                            drag: true,
                            pauseOnHover: true,
                            resetOnHover: false,
                            progressBar: true,
                            progressBarColor: '',
                            animateInside: true,
                            buttons: {},
                            transitionIn: 'fadeInUp',
                            transitionOut: 'fadeOut',
                            transitionInMobile: 'fadeInUp',
                            transitionOutMobile: 'fadeOutDown',
                            onOpen: function () {},
                            onClose: 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
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.
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.
onOpen function() {} Callback function triggered when open the toast.
onClose function() {} Callback function triggered when close the toast.

Methods

Settings

is used to set default values.

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

Show

Opens the toast. (Example with buttons).

                        iziToast.show({
                            color: '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',
                                        onClose: function(instance, toast, closedBy){
                                            console.info('closedBy: ' + closedBy); //btn2
                                        }
                                    }, toast, 'close', 'btn2');
                                }]
                            ],
                            onOpen: function(instance, toast){
                                console.info('callback abriu!');
                            },
                            onClose: 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.

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

Close

Capture when the toast is closing.

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

Made with by Marcelo Dolce.

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