Toast

Elemento dinámico proveniente de la dependencia Dynamics-Tips 1.8.0 que permite mostrar mensajes dinámicos en pantalla con animaciones y estilos personalizados, este elemento está gestionado por el núcleo de posicionamiento de la dependencia antes mencionada y se puede disponer por separado a través del siguiente enlace Dynamics-Tips 1.8.0.

Toast Iniciación

Para poder utilizar este módulo al igual que demás módulos de JavaScript de la biblioteca es necesario vincular a nuestro proyecto el archivo procesado y transpilado de la biblioteca lo cual ya se mencionó en la página de bienvenida Get Started en la cual se muestran varias formas de instalar la biblioteca en nuestro proyecto, iguamente para llevar a cabo los ejemplos lo más rápido y sencillo es realizar esto a través de su CDN.

Muestra

Vamos a ver un ejemplo básico que se establece por default para realizar una introducción al tema.

Como se puede observar ese es un toast por defecto, así se verá el efecto en todos los ejemplos personalizados. Es importate aclarar que pude ser inicializado con texto pero en realidad lo que muestra el elemento es HTML.

Contenido del Toast

Ahora vamos a aprender como pasarle contenido al Toast para que muestre lo que buscamos.
Como se puede ver en el código anterior el toast recibe un JSON con el atributo html este es uno de los parámetros de configuración.

Html en el Toast

Ahora vamos a añadirle estilos al texto que enviamos a través de etquetas HTML a través de clases que posea el desarrollador o las de la biblioteca.

Clases Css en el Toast

Para realizar esto lo conveniente es crear una función de javaScript separada, esto debe a que si lo hacemos desde el propio elemento disparador el código se puede volver inmanejable. Por esta razón el arreglo con las clases CSS que modificarán el Toast se configurarán en una función. 

    MensajeError = () => {
        let conf = {
            html: `El botón presionado envía este mensaje`, // Html del mensaje 
            clases: ['bg-red', 'bor-rad-10', 'bor-gris-c-3'] // Clases que modifican la pariencia del toast
        }
        BS.Toast(conf)
    }

    MensajeSuccess = () => {
        let conf = {
            html: `Este es un mensaje de Success`, // Html del mensaje 
            clases: ['fd-verde-az', 'bor-rad-5', 'bor-grey-s-1']
        }
        BS.Toast(conf)
    }
En el segundo parámetro que recibe la función toast se envía un arreglo de clases estas pueden ser muy diversas y es el usuario el que las selecciona, a partir de esto la flexibilidad que ofrece el elemento es muy alta. 
    MensajeSuccessIcono = () => {
        let conf = {
            // Se envía el mensaje con un ícono de FontAwesome
            html: `Este es un mensaje de Success `, // Html del mensaje 
            clases: ['fd-verde-az', 'bor-rad-5', 'bor-grey-s-1']
        }
        BS.Toast(conf)
    }

Tiempo de Duración del Toast

También podemos configurar la duración del toast de manera tal que permanezca el tiempo deseado, por defecto son 2000ms pero este tiempo es configurable a través del campo tiempo. 

        Tiempo5000 = () => {
            let conf = {
                html: `Este toast dura 5 seguendos`, // Html del mensaje 
                clases: ['fd-verde-az','bor-grey-s-1', 'bor-pill'],
                tiempo: 5000
            }
            BS.Toast(conf)
        }

Cierre del Toast

Se le puede dar la posibilidad al usuario de cerrar el toast cuando quiera, para eso es necesario configurar el toast con el atributo cerrar en el JSON de configuración con el valor true. 

        CerrarToast = () => {
            let conf = {
                html: `Este toast dura 5 seguendos`, // Html del mensaje 
                clases: ['fd-verde-az','bor-grey-s-1', 'bor-pill'],
                tiempo: 5000,
                cerrar: true // Con esto le da la opción al usuario
            }
            BS.Toast(conf)
        }
Recomendación final: Para aprovechar este elemento en su totalidas es necesario conocer las clases de colores y las funcionalidades establecidas para la configuración de los bordes de los elementos.
`r`n