Simple Vanilla JavaScript Toast biblioteca de notificación-Toastify

Vista prévia

Descripción

Toastify es una biblioteca de JavaScript simple, ligera y vainilla que se usa para enviar mensajes Toast, no bloqueables a los usuarios finales.

Funcionamiento

Importa el archivo JavaScript principal ' Toastify. js ' en el documento HTML.

<script src="src/toastify.js"></script>

Cree un mensaje del sistema básico y especifique la duración en milisegundos para ocultar la notificación.

var myToast = Toastify({
 text: "This is a toast message",
 duration: 5000
})

Muestra el mensaje del brindis. En este ejemplo, el mensaje del sistema se descarta automáticamente después de 5 segundos.

myToast.showToast();

El CSS predeterminado para el mensaje del sistema. Copie y pegue los estilos CSS como se muestra a continuación en su página web.

.toastify {

padding: 12px 20px;

color: #ffffff;

display: inline-block;

box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);

background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);

background: linear-gradient(135deg, #73a5ff, #5477f5);

position: fixed;

top: -150px;

right: 15px;

opacity: 0;

transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

border-radius: 2px;

cursor: pointer;
}

.toastify.on { opacity: 1; }

Especifique el contenedor en el que desea mostrar el mensaje del sistema.

myToast = Toastify({

text: "This is a toast message",

duration: 5000,

selector: '#container'
})

Ejecute una función de devolución de llamada al hacer clic en el mensaje del sistema.

myToast = Toastify({

text: "This is a toast message",

duration: 5000,

callback: function(){}
})

Más opciones de configuración.

myToast = Toastify({

// On-click destination

destination: null,


// Open destination in new window

newWindow: false,


// Show toast close icon

close: false,


// Toast position - top or bottom

gravity: bottom,


// Toast position - left or right

positionLeft: false,


// Background color

backgroundColor: "linear-gradient(135deg, #73a5ff, #5477f5)",


// Avatar

avatar: "",


// Additional classes for the toast

classes: ""
})

Registro de cambios

v1.3.2 (12/07/2018)

• Se agregó el atributo z-index.

v1.3.1 (10/09/2018)

• previene el uso! importante cuando se sobrescribe. Toastify color de fondo con CSS personalizado
• Actualice los nombres de clase dentro de la consulta de medios

v1.2.1 (05/31/2018)

• Se agregó soporte para clases. Ahora se pueden agregar clases personalizadas a la notificación del sistema mientras se crea.

v1.2.0 (05/25/2018)

• Se soluciona el problema cuando se utiliza de destino y las opciones de de cierre al mismo tiempo
• Agregue compatibilidad con clases personalizadas