Pequeño vainilla JavaScript Toast aviso plugin-vainilla-tostadas

Vista prévia

Descripción

vanilla-toast is a zero-dependency JavaScript plugin to create customizable and themeable toast-like notifications on the web app.

También admite métodos encadenados que le permiten mostrar las notificaciones del sistema una por una.

De forma predeterminada, la notificación del sistema activa se descarta automáticamente después de 2 segundos con una animación de fundido. Puede config el tiempo de espera y la duración de desvanecimiento en el JavaScript.

Funcionamiento

Inserte los archivos ' Vanilla-Toast. css ' y ' Vanilla-Toast. js ' en el documento HTML.

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

Cree una notificación del sistema predeterminada.

vanillaToast.show('Hello World!')

// or
vanillaToast.Predeterminado('Hello World!')

Aplique temas a la notificación del sistema. Temas disponibles:

• Predeterminado
• Información
• Éxito
• Advertencia
• Error

// Información
vanillaToast.Información('Hello World!')

// Éxito
vanillaToast.Éxito('Hello World!')

// Advertencia
vanillaToast.Advertencia('Hello World!')

// Error
vanillaToast.Error('Hello World!')

Configuración de la notificación del sistema mediante la aprobación de las siguientes opciones:

vanillaToast.show('Hello World!',{


// theme name or custom class

className: 'Predeterminado',


// fade animation options

fadeDuration: 400,

fadeInterval: 16,


// timeout

duration: 2000,


// shows close button

closeButton: false,


// closes the notification immediately

immediately: false


})

Ejecute una devolución de llamada después de cerrar la notificación del sistema.

vanillaToast.show('Hello World!',{


// theme name or custom class

className: 'Predeterminado',


// fade animation options

fadeDuration: 400,

fadeInterval: 16,


// timeout

duration: 2000,


// shows close button

closeButton: false,


// closes the notification immediately

immediately: false

}, function(){

// callback function here
})

More API methods.

// clears the current toast notification
vanillaToast.cancel();

// clears all the toast notifications
vanillaToast.cancelAll()