Componente de snackbar mínimo en JavaScript-Snacker

Vista prévia

Descripción

picoteo es un plugin de JavaScript simple muerto utilizado para mostrar snackbars estilo Android en sus aplicaciones Web. Snackbars proporcionan comentarios ligeros sobre una operación.

Muestran un breve mensaje en la parte inferior de la pantalla en el móvil y la parte inferior izquierda en dispositivos más grandes. Snackbars aparecen por encima de todos los demás elementos en la pantalla y sólo uno se puede mostrar a la vez.

Funcionamiento

Cree un contenedor para la snackbar.

<div id="snackbar"></div>

Cargue el archivo de JavaScript Toast. js al final del documento HTML.

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

Cree los snackbars como éstos:

t.snackShow('Some text some message..', 'error');
t.snackShow('Some text some message..', 'info');
t.snackShow('Some text some message..', 'success');

Style & animar el snackbar en el CSS.

#snackbar {

visibility: hidden;

min-width: 250px;

margin-left: -125px;

text-align: center;

border-radius: 2px;

padding: 16px;

position: fixed;

z-index: 1;

right: 30px;

top: 30px;
}

#snackbar.snack {

visibility: visible;

-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;

animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
 @-webkit-keyframes
 fadein {
from {
right: 0;
opacity: 0;
}

to {

right: 30px;

opacity: 1;
}
}
 @keyframes
 fadein {
from {
right: 0;
opacity: 0;
}

to {

right: 30px;

opacity: 1;
}
}
 @-webkit-keyframes
 fadeout {
from {
right: 30px;
opacity: 1;
}

to {

right: 0;

opacity: 0;
}
}
 @keyframes
 fadeout {
from {
right: 30px;
opacity: 1;
}

to {

right: 0;

opacity: 0;
}
}