izitoast

iziToast

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

izitoast.marcelodolce.com

Fast	Responsive	Animated	Lightweight	Customizable	No dependencies	Retina

• All modern browsers are supported (Tested in Chrome, Firefox, Opera, Safari, IE10+ and Edge).
• Bugs? create an issue here.

---

Version Log

• v1.1.0

  • Drag/Touch support - Implemented.
  • ClosedBy param ('drag' or 'button') - Implemented.
  • Targetfirst option - Implemented.
  • Background & message color options - Implemented.
  • Write HTML elements in toast messages. - Implemented.
  • Leap in animation when used Target - Fixed.
  • zIndex, unexpected behavior - Fixed.
  • box-shadow of balloon toast with progressbar not applied correctly - Fixed.

• v1.0.2

  • Original stylus source files - Implemented.
  • Folder structure - Modified.
  • Larger zIndex and Option to set it - Implemented.
  • Flip animation - Fixed.
  • Wrong positioning of internal elements - Fixed.

• v1.0.1

  • Internet Explorer support - Implemented.

---

Install

npm

npm install izitoast --save

bower

bower install izitoast --save

---

Default Options

iziToast.show({
    class: '',
    title: '',
    titleColor: '',
    message: '',
    messageColor: '',
    backgroundColor: '',
    color: '', // blue, red, green, yellow
    icon: '',
    iconText: '',
    iconColor: '',
    image: '',
    imageWidth: 50,
    zindex: 99999,
    layout: 1,
    balloon: false,
    close: true,
    rtl: false,
    position: 'bottomRight', // 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.
message	''	Message of the toast.
messageColor	''	Message color.
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.
imageWidth	50	Width of cover image.
zindex	99999	The z-index CSS attribute of the toast.
layout	1	It can be 1 or 2, or use another layout, creating the class like this: ".iziToast-layout3"
balloon	false	Applies a balloon like toast.
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.
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.
resetOnHover	false	Reset the toast timeout while the cursor is on it.
progressbar	true	Enable timeout progress bar.
progressbarColor	''	Progress bar color.
animateInside	true	Enable animations of elements in the toast.
buttons	{}	You can specify an array of buttons.
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'
});

• 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: [
        ['<button>Ok</button>', function (instance, toast) {
            alert("Hello world!");
        }],
        ['<button>Close</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOutUp' }, toast);
        }]
    ],
    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();

• 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');
    }
});