Crear notificaciones tostadas personalizadas en Vanilla JavaScript-TOASTADA

Vista prévia

Descripción

TOASTADA es un plugin de notificación de JavaScript vainilla que proporciona una manera sencilla de mostrar mensajes de la tostada personalizables en la Página Web. De forma predeterminada, las notificaciones del sistema se desestiman automáticamente después de 4 segundos, con un efecto deslizante configurable.

Instalación

npm install --save toastada

Funcionamiento

Importar el archivo JavaScript principal en la página web:

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

Cree mensajes del sistema con la siguiente sintaxis de JS.

toastada.success('Success!');

toastada.info('Information');

toastada.warning('Warning!');

toastada.error('Error');

Los estilos de brindis primarios.

/* Entire toast container */
.toast-container {

position: fixed;

z-index: 999999999;

max-width: 300px;

/*min-width: 300px;*/
}

/* Each toast gets this style */
.toast {

/*width: 300px;*/

font-family: "helvetica neue";

font-weight: 200;

letter-spacing: 2px;

opacity: 1;

position: relative;

right: 0;

color: white;

background: rgba(50,50,50,.9);

padding: 20px;

margin-bottom: 8px;

border-radius: 3px;

transition: .3s all ease;
}

.toast.toast-exit {

transition: .4s all ease;

transform: translate3d(0,0,0);

right: -300px;

opacity: 0;
}

Estilos de notificación personalizados.

/* Successful toast class */
.toast-success {

background: rgba(126,211,33,.9);

box-shadow: 0 5px 15px rgba(126,211,33,.5);
}

.toast-info {

background: rgba(0,50,250,.9);

box-shadow: 0px 5px 15px rgba(0,50,250,.5);
}

/* Error toast class */
.toast-error {

background: rgba(191,36,58,.9);

box-shadow: 0 5px 15px rgba(191,36,58,.5);
}

/* Warn toast class */
.toast-warn {

background: rgba(245,166,35,.9);

box-shadow: 0 5px 15px rgba(245,166,35,.5);
}

Más opciones de configuración.

toastada.success('Success!', {

prependTo: document.body.childNodes[0],

lifeSpan: 4000, // timeout

position: 'top-right',

animate: false, // enable animation

animateDuration: 0
});

Registro de cambios

09/25/2018

• Actualizar JS