Los toasts son mensajes dinámicos que le informan al usuario de una determinada situación. Se utilizan para notificar eventos breves y no intrusivos, como la confirmación de una acción o la llegada de un nuevo mensaje.
Ahora veremos un ejemplo básico de un toast que aparece en la esquina inferior derecha de la pantalla.
Es posible utlizar los toasts porque el archivo bodystyle.min.js está incluido en el proyecto.
Ahora veremos un ejemplo más complicado pasando por parámetro el contenido HTML que mostrará el toast.
Es posible personalizar el toasts con clases CSS enviadas por parámetro, dentro de este conjunto podemos incluir las clases de bodystyle de manera tal de aprovechar la potencia de la biblioteca.
const ClasesToasts = () => {
let conf = {
// Nótese que html puede recibir código HTML
html: `🔔 Toast Personalizados`,
// Nótese que recibe un array de clases, las mismas pueden ser cualquiera.
clases: ["bor-pill", "fd-gris-az", "c-white", "bor-red-1"]
}
BS.Toast(conf);
}
Es posible configurar el tiempo que estará visible el toast en pantalla, por defecto el mismo es de 3000 milisegundos (3 segundos).
const TiempoToasts = () => {
let conf = {
html: `🔔 5 Segundos`,
clases: ["bor-pill", "fd-gris-az", "c-white", "bor-red-1"],
tiempo: 5000 // 5 segundos
}
BS.Toast(conf);
}
Desde un atributo del archivo de configuración podemos darle la oportunidad al usuario de cerrar el toast antes de tiempo.