Simple Fast Vanilla JS tostada biblioteca-SheepToasts

Vista prévia

Descripción

Sólo otra biblioteca de vainilla JavaScript utilizado para mostrar Android/material inspirado < a href = "https://wikicss.com/tag/toast/" > Toast notificaciones de varios tipos (éxito, información, ADVERTENCIA) en sus aplicaciones Web.

Admite animaciones CSS3 personalizadas y botones de acción. Sin dependencias.

De forma predeterminada, los mensajes del sistema se descartan automáticamente después de un cierto tiempo de espera. También puede cerrarlas manualmente haciendo clic en el cuerpo del mensaje.

Funcionamiento

Incluya el < a href = "https://daneden.github.io/animate.css/" > Animate. CSS en la sección Head si desea más animaciones.

<link rel="stylesheet" href="animate.min.css">

Incluya el archivo JavaScript principal en la Página Web.

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

Inicializar la biblioteca con las opciones predeterminadas y el SheepToasts está listo para su uso.
crear un mensaje de notificación de éxito:

SheepToasts.success('Success.');

// mode: success, info, warning
// animation: Name of animation for show toast
// buttons: Buttons [object]
SheepToasts.show(mode, message, animation, buttons)

Crear un mensaje del sistema con los botones sí/no:

SheepToasts.warning('Are you sure?', null, {

yes: {


value: 'Yes',


callback: function(){



alert('You are sure!');



SheepToasts.close(this.toastId);


}

},

no: {


value: 'No',


callback: function(){



SheepToasts.close(this.toastId);


}

}
});

Opciones disponibles:

{


/*


animation: {



in: 'fadeIn', //Default: none



out: 'fadeOut', //Default: none



duration: '1s' //Default: 0.5s


}

*/

animation: false,


// margin in pixels

toastMargin: 4,


// auto dismiss after 5 seconds

delayRemove: 5000,


// where to place the toast messages

sort: 'bottom'


// main CSS styles

cssMain: {


display: 'inline-block',


maxWidth: '320px',


padding: '5px 8px',


position: 'fixed',


top: 'auto',


right: '32px',


bottom: '32px',


left: 'auto',


borderRadius: '3px',


wordBreak: 'break-all',


fontFamily: 'cursive, sans-serif',


fontSize: '13px',


cursor: 'pointer',


transition: 'top 0.32s, bottom 0.32s',


webKitAnimationDuration: '0.5s',


mozAnimationDuration: '0.5s',


oAnimationDuration: '0.5s',


animationDuration: '0.5s'

},


// button styles

cssButtons: {


display: 'inline-block',


height: '20px',


margin: '-3px 0 0 3px',


padding: '0 5px',


verticalAlign: 'middle',


whiteSpace: 'nowrap',


border: 'none',


borderRadius: '10px',


fontFamily: 'inherit',


fontSize: '11px',


cursor: 'pointer'

},


// mode styles

cssModes: {


warning: {



color: '#fafeff',



background: '#c8354e',



textShadow: '#e74c3c 1px 2px 1px',



_buttons: {




color: '#fafeff',




textShadow: '#46231f 0px 0px 3px',




background: '#e25353'



}


},


info: {



color: '#fafeff',



background: '#2980b9',



textShadow: '#3498db 1px 2px 1px',



_buttons: {




color: '#fafeff',




textShadow: '#173646 0px 0px 3px',




background: '#2c9fea'



}


},


success: {



color: '#fafeff',



background: '#27ae60',



textShadow: '#1e7744 1px 2px 1px',



_buttons: {




color: '#fafeff',




textShadow: '#185833 0px 0px 3px',




background: '#5ac17f'



}


}

}
}