Colecciones por default
Vamos a ver como generar una colección con los estilos básicos que permitirán agrupar un conjunto de enlaces
para la navegación.
La clase utilizada como contenedor es .list-container y dentro de esta
.list-item que envuelve a cada enlace de la lista.
Colecciones en colores
Para añadirle un color a la colección tendremos que utilizar los colores de la biblioteca
los cuales están en la siguiente sección:
Colores
Lo que se dispuso arriba se puede realizar con todos los colores de fondo de los cuales dispone
la biblioteca, por esta razón se le recomienda al lector que visiten esa sección.
Colores
Colección Desplegable 4.5.0
Desde la versión 4.5.0 se añadió las colecciones
desplegables, con las mimas funcionabilidades que las antes vistas pero con el cpodigo JS
que permite desplegar un conjunto de opciones.
Para poder llevar a cabo este ejemplo hay que definir un ID global para la lista, luego
cada uno de los disparadores de la lista añadirle el atributo data-target de esta forma
conseguimos un vínculo entre los elementos a desplegar.
Inicialización
Para poder utilizar este módulo es necesario inicializarlo con la función de la biblioteca correspondiente. Es
importante recalcar las dos situaciones posibles para evitar el mal funcionamiento del componente.
// CDN : https://raw.githack.com/FedeManzano/bodystyle/refs/heads/master/dist/js/bodystyle.min.js
// 1 OPCIÓN ESTÁTICA
// ------------------
// Inicializa el elemento
// cuando estos están dispuestos de manera estática dentro del DOM
BS.Colecciones().iniciar({ contexto : "#coleccion_desplegable", colorFondo : "bg-pink-d-1",colorTexto : "c-blanco", colorFlechas : "#fff" })
/*******************************************************************************/
// 2 OPCIÓN DINÁMICA
// -----------------
/*
En proyectos donde se tabaja a través de injección de elementos a través
de JavaScript de manera dinámica, y el elemento que se estudia en esta sección se
ingresa de esta manera, es necesario aplicar un retraso en la inicialización del
módulo con el siguiente codigo.
*/
//Si los elementos que conforman esta funcionalidad son dinámicos
// Agregados a través de JS
window.onload = () => {
setTimeout( () => {
BS.Colecciones().iniciar({ contexto : "#coleccion_desplegable", colorFondo : "bg-pink-d-1",colorTexto : "c-blanco", colorFlechas : "#fff" })
}, 100);
}
Como se puede observar en el código anterior la función de inicialización recibe cuatro parámetros que van a permitir
darle la funcionalidad a la lista y además los estilos para configurarla de manera correcta.
Parámetros
| Parámetro |
Tipo |
Descripción |
Obligatorio |
Default |
| contexto |
string |
ID de la lista a la cual apunta la funcionalidad |
SI |
Vacio |
| colorFondo |
string |
Clase de la biblioteca para establecer el color de fondo formato (fd-[color] | bg-[color]) |
NO |
fd-blanco |
| colorTexto |
string |
Clase de la biblioteca para establecer el color del texto formato (c-[color] | c-[color]) |
NO |
fd-negro |
| colorFlechas |
string |
Color hexadecimal que permite configurar el color de las flechas EJ: #000 |
NO |
#000 |
Estructura
Ahora vamos a analizar cual es la estructura de la lista de manera tal de poder utilizarla.
Destroy v5.0.0
Si queremos desvincular la lógica de la librería del elemento Colecciones
de manera tal de liberar recursos es necesario utilizar el método destroy
que provee el módulo visto en este apartado.
En este caso la función BS.Colecciones() entrega una instancia
de la clase Colecciones
que permitirá almacenar esta instancia en una variable, y en el momento más oportuno podemos ejecutar el método destroy().
// Esto es una instacia de la clase Coleccion
let col = BS.Colecciones()
// Iniciación como vimos anteriormente EJ:
col.iniciar({ contexto : "#coleccion_desplegable", colorFondo : "bg-pink-d-1",colorTexto : "c-blanco", colorFlechas : "#fff" })
// Ahora en el momento más oportuno podemos devincular
// la lógica liberando recursos con el método destroy
col.destroy("#coleccion_desplegable") // Notese que se envía por parámetro el ID de la lista
Notese que cuando se llama al método destroy las flechas que acompañan a cada elemento
desplegable dentro de la lista desaparecerá y la capacidad de desplegar el submenú asociado
ya no estará disponible.