Animados mensajes Toast en cola en Pure JavaScript-siiimple-Toast

Vista prévia

Descripción

Sin embargo, otra biblioteca de notificaciones ES6 que le ayuda a mostrar animada material inspirado en los mensajes del brindis en la Página Web.

Características

• Soporta posiciones horizontales y verticales.
• 3 tipos de notificaciones del sistema: por defecto, alerta y éxito.
• Admite colas de notificaciones.
• Animaciones suaves basadas en transiciones y transformaciones CSS3.

Instalación

npm install --save siiimple-toast

¿Cómo funciona?

Importe el siiimple-Toast en el proyecto o incluya directamente el archivo JavaScript principal en la Página Web.

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

Inicializar la biblioteca de notificaciones del sistema.

const toast = new siiimpleToast();

Crear mensaje de notificación por defecto/alerta/éxito como estos:

// default
toast.message('Hello World!');

 // success
toast.success('Hello World!');

// alert
 toast.alert('Hello World!');

Config el mensaje del brindis a su gusto.

const toast = new siiimpleToast({



position: 'fixed',



padding: '1rem 1.2rem',



minWidth: '17rem',



zIndex: '10',



borderRadius: '2px',



color: 'white',



fontWeight: 300,



whiteSpace: 'nowrap',



pointerEvents: 'none',



opacity: 0,



boxShadow: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)',



transform: 'scale(0.5)',



transition: 'all 0.4s ease-out'
});

Registro de cambios

09/23/2018

• v3.1.6