Biblioteca de notificaciones del sistema configurable adaptable-iziToast

Vista prévia

Descripción

iziToast es un simple, rápido pero totalmente configurable JavaScript utilizado para crear responsive, elegante y CSS3 animado notificaciones tostadas de varios tipos en la pantalla.

Características

• 4 temas incorporados: información, ADVERTENCIA, error y éxito.
• Fácil de añadir sus propios temas.
• Iconos personalizados.
• Imágenes personalizadas.
• Posiciones personalizadas.
• Cierre automático con una barra de progreso.
• Transiciones CSS3 personalizadas.

¿Cómo funciona?

Descargue e importe los siguientes archivos en el documento.

<link rel="stylesheet" href="iziToast.min.css">
<script src="iziToast.min.js"></script>

El código JavaScript para mostrar una notificación del sistema básico en la pantalla.

iziToast.show({


title: 'Hello World!',


message: 'I am a basic toast message!'
});

Todos los ajustes predeterminados que se pueden utilizar para personalizar las notificaciones.

class: '',
title: '',
message: '',
color: '', // blue, red, green, yellow
icon: '',
iconText: '',
iconColor: '',
image: '',
imageWidth: 50,
layout: 1,
balloon: false,
close: true,
rtl: false,
position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
target: '',
timeout: 5000,
pauseOnHover: true,
resetOnHover: false,
progressBar: true,
progressBarColor: '',
animateInside: true,
buttons: {},
transitionIn: 'fadeInUp', // bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
transitionOut: 'fadeOut', // fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
transitionInMobile: 'fadeInUp',
transitionOutMobile: 'fadeOutDown',
onOpen: function () {},
onClose: function () {}

Api.

// override options
iziToast.settings({

// options here
});

// hide the toast notification
iziToast.hide();

// create 'Info' toast notification
iziToast.info({

title: 'Hello World!',

message: 'I am a toast message!'
});

// create 'Success' toast notification
iziToast.success({

title: 'Hello World!',

message: 'I am a toast message!'
});

// create 'Warning' toast notification
iziToast.warning({

title: 'Hello World!',

message: 'I am a toast message!'
});

// create 'Erro' toast notification
iziToast.error({

title: 'Hello World!',

message: 'I am a toast message!'
});

// remove all the toast notifications from DOM
iziToast.destroy();

Registro de cambios

08/06/2018

• v1.4.0