Tostadora de mensaje personalizable en Vanilla JavaScript-tostadas

Vista prévia

Descripción

Sin embargo, otra biblioteca de tostadora de mensaje vainilla JS le permite generar mensajes Toast en la aplicación Web.

Funcionamiento

Importe el JavaScript y la hoja de estilos del Toast en el documento.

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

Cree una nueva instancia de Toast y defina el título & contenido que se mostrará en el mensaje del sistema.

var myToast = new Toast({


title: 'Toast Title',


 content: '<b>Toast</b> Content'
 })

Muestre el mensaje del brindis cuando sea necesario.

myToast.show();

El mensaje del brindis se destruirá automáticamente después de 3 segundos. Puede ajustar el tiempo de espera en JavaScript en init.

var myToast = new Toast({


title: 'Toast Title',


 content: '<b>Toast</b> Content',


timeout: 3000
})

Vuelva a colocar el mensaje del sistema. Predeterminado: Top Center.

var myToast = new Toast({


title: 'Toast Title',


 content: '<b>Toast</b> Content',


// 'top right (default)', 'top center', 'top left', 'right center', 'center', 'left center', 'bottom right', 'bottom center', 'bottom left'


position: 'top right'
})

Vuelva a colocar el mensaje del sistema. Predeterminado: Top Center.

var myToast = new Toast({


title: 'Toast Title',


 content: '<b>Toast</b> Content',


// warning, info, success, caution


type: 'warning'
})

Establezca la función de aceleración.

var myToast = new Toast({


title: 'Toast Title',


 content: '<b>Toast</b> Content',


// 'expo-in', 'expo-out', 'expo-in-out', 'back-in', 'back-out', 'back-in-out', 'quart-in', 'quart-out', 'quart-in-out'


easing: 'quart-in-out'





 })

Mostrar una barra de progreso para indicar la cantidad de tiempo que queda para cerrar el mensaje del sistema.

var myToast = new Toast({


title: 'Toast Title',


 content: '<b>Toast</b> Content',


showProgress: true




})

Anexar el mensaje del sistema a un contenedor específico.

var myToast = new Toast({


title: 'Toast Title',


 content: '<b>Toast</b> Content',


append: false // selector
})