🔽 Dropdown

Lista dinámica desplegable que permite darle al usuario opciones asociadas a un elemento.
Los dropdowns son útiles para ahorrar espacio en la interfaz y organizar opciones relacionadas de manera clara.

Muestra

Ahora veremos una muestra de como utilizar los dropdowns en bodystyle:

HTML

    // Inicializar los dropdowns
    BS.DropDownInit()

Advertencia

Recuerda que para que los dropdowns funcionen correctamente, debes inicializarlos con BS.DropDownInit() en tu archivo JavaScript.
Además, asegurarse que el atributoto data-target apunte correctamente al id del dropdown correspondiente.

Posición

Los dropdowns se posicionan automáticamente debajo del elemento disparador. Sin embargo, si el dropdown no tiene suficiente espacio para mostrarse hacia abajo, se ajustará para mostrarse hacia arriba.
Además, se puede elegir la posición del dropdown agregando clases adicionales al elemento dropdown:

HTML

Estilos

Hasta el momento vimos el dropdown por defecto, pero podemos personalizarlo de manera tal de contar con dropdown con diferentes estilos provistos en otras secciones de Bodystyle, como por ejemplo:

HTML

Advertencia

Recuerda que los estilos adicionales deben aplicarse al elemento dropdown, no al disparador.
Todos las clases utilizadas están documentadas en las secciones correspondientes:

Evento Hover

Por defecto el evento asociado al disparador es el evento click, pero podemos personalizar este evento a través del data-evt que permitirá disparar el evento click o hover.

HTML

Destroy

Podemos destruir los dropdown inicializados utilizando el método BS.DropDownDestroy(). Esto eliminará todos los event listeners asociados a los dropdowns y restaurará su estado original

    const Destroy = () => {
        BS.DropDownDestroy()
        BS.Toast({
            html: "✅ Dropdowns destruidos correctamente",
            duration: 3000,
            clases: ["bor-pill"]
        })
    }