Pequeña vainilla JavaScript Toast notificación biblioteca-tostadas de vainilla

Vista prévia

Descripción

Vanilla Toast is a small yet customizable toast notification library in pure vanilla JavaScript.

Características

• Auto cierra después de un cierto tiempo de espera.
• 6 tipos de notificaciones: información, éxito, ADVERTENCIA, error, Plain y Custom.
• 4 posiciones: abajo a la izquierda, abajo a la derecha, arriba a la izquierda, arriba a la derecha.
• Se puede colocar en cualquier contenedor.

Instalación

# NPM
$ npm install vanilla-toast --save

# Bower
$ bower install vanilla-toast

Funcionamiento

Incluya la versión minimizada de Vanilla Toast en la Página Web.

<script src="vanilla-toast.min.js"></script>
<link href="vanilla-toast.min.css" rel="stylesheet">

El código JavaScript para mostrar los mensajes del sistema en la página.

• posición: la posición de los mensajes del sistema. ' abajo a la izquierda ', ' abajo a la derecha ', ' arriba a la izquierda ' y ' arriba a la derecha '.
• timeOut: auto cierra el mensaje del sistema después de x milisegundos.

toast.showInfo("This is info. It is really long and it doesn't really fit into this small toast", "This is info message", position, timeOut);

toast.showSuccess("Success", "You made it. Congratulations!", position, timeOut);

toast.showWarning("This is warning", "This is warning message. It is really long and it doesn't really fit into this small toast", position, timeOut);

toast.showError("This is error", "This is error message. It is really long and it doesn't really fit into this small toast", position, timeOut);

toast.showPlain("This is simple message", "This is error message. It is really long and it doesn't really fit into this small toast", position, timeOut);

toast.showCustom("Cookie!", "Man, I love cookies!", "icCookie.svg", position, timeOut);

A veces es posible que necesite mostrar los mensajes del sistema en un contenedor específico.

var toastParent = document.querySelector(".custom-container");
new VanillaToast(toastParent);