Waves

Elementos dinámicos que se añaden para generar el efecto cuando se da click a un elemento. Desde la versión 5.0.0 se incluyen los elementos dinámicos (elementos que no están definidos en el HTML, sino que se incluyen a través de JS). En este caso es necesario inicializar el módulo Waves, caso contrario se inicaliza automáticamente al incrorporar el archivo bodystyle.min.js al proyecto.

Inicialización

Para protectos dinámicos en los cuales los elementos se incluyen al HTML en tiempo de ejecución, es necesario la inicialización de los waves como se muestra a continuación. 


    /**
        Inicialización para proyectos con elementos dinámicos 
        que necesitan un retraso a la espera de la carga de estos elementos.
    */
    window.onload = () => {
        setTimeout( () => {
            BS.WavesInit()
        }, 100)
    }

Muestra

    document.getElementById("boton_dinamico").insertAdjacentHTML("beforeend", 
    `
            
    `)
Notese que al elementos que necesitemos que muestre el efecto le añadimos la clase .waves como se muestra en el código anterior.

Colores

es posible añadirle colores al efecto, para esta tarea es necesario agregar el atributo data-color y dentro una clase perteneciente a Bodystyle con el color de fondo del elemento que produce el efecto.

Destroy

Es posible eliminar la lógica del comportamiento del efecto, de manera tal de optimizar recursos sin tocar el HTML. La forma es llamando a función que destruye los elementos WAVES.

Si presiona el botón el efecto Waves se elimina de los elementos sin modificar el HTML. 
        document.getElementById("desactivador").addEventListener("click", () => {
            BS.WavesDestroy()
            BS.Toast({html: "Waves Eliminados", clases: ["bg-red"]})
        })
`r`n