Elemento dinámico que permite a través de las solapas definidas por el usuario
seleccionar el contenido a visualizar. La biblioteca contiene un conjunto de clases
que permiten definir este elemento tan utilizado en el desarrollo web.
Es importante aclarar que es uno de los elementos con más funciones, lo cual implica
que hay que utilizar muchas de las clases utilitarias y de alineamiento de la biblioteca, de esta forma
se obtienen resultados óptimos.
Inicialización del Tabs
Lo primero como todos los módulos de JavaScript de la biblioteca es necesario disponer
en nuestro proyecto el archivo bodystyle.min.js
de esta forma tendremos a disposición la lógica para manejar este elemento.
Si no quieren agregarlo a través de su CDN pueden descargargar el archivo a través de NPM o
la descarga directa la cual la van a encontrar al inicio de esta documentación Get Started.
Luego, es necesario inicializar el elemento, para ello es necesario darle un id al tab único utilizado
como contexto que va a permitir gestionar la lógica del elemento.
// 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
/**
* CUATRO PARÁMETROS DE LOS CUALES EL PRIMERO ES OBLIGATORIO
* contexto: ID que se utiliza para definir el contexto
* colorFuente: Color del texto del tab (Estilos de texto)
* colorFondo: Color del fondo del tab (Clases colores)
* colorBorde: Borde selector (Color de fondo)
*/
BS.TabInit().iniciarBorde({contexto: "#ta",colorFuente: "c-white", colorFondo: "bg-black", colorBorde: "fd-blanco"})
/****************************************************************************/
// 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.TabInit().iniciarBorde({contexto: "#ta",colorFuente: "c-white", colorFondo: "bg-black", colorBorde: "fd-blanco"})
}, 100);
}
Muestra Default
Ahora veremos un ejemplo por default de como definir el elemento tab poder tener una primera apreciación.
El ID selecionado va a ser #tab1.
Hola soy el inicio del tab!!
Hola soy los servicios del tab!!
Hola soy la galeria del tab!!
Hola soy el porfolio del tab!!
Hola soy el inicio del tab!!
Hola soy los servicios del tab!!
Hola soy la galeria del tab!!
Hola soy el porfolio del tab!!
Notese que cada opción del tab (etiquetas label) tienen un atributo data-target
que apunta al contenido que pretende mostrar, por esta razón estos dos elementos (contenido y opción están enlazados)
de esta forma se puede establecer la conexión, es muy importante que el data-target
esté igualado al #idContenido, no olvidarse el numeral.
// Inicialización del ejemplo
BS.TabInit().iniciarBorde({contexto: "#tab1"})
Tab Modificado
Ahora vamos a ver un ejemplo un poco más complejo con el tab modificado por los parámetros
de ingreso de la función de iniciación.
Hola soy el inicio del tab!!
Hola soy los servicios del tab!!
Hola soy la galeria del tab!!
Hola soy el porfolio del tab!!
Hola soy el inicio del tab!!
Hola soy los servicios del tab!!
Hola soy la galeria del tab!!
Hola soy el porfolio del tab!!
Como se puede observar pra conseguir este resultado se utilizaron las clases de bordes
de la biblioteca, de colores, de padding
y flexbox.
// Inicialización del elemento con las clases de Bodystyle
BS.TabInit().iniciarBorde({contexto: "#tab2",colorFuente: "c-white", colorFondo: "bg-black", colorBorde: "fd-blanco"})
Ahora vamos a ver un ejemplo similar per más personalizado, para luego ver un ejemplo más complejo.
Hola soy el inicio del tab!!
Hola soy los servicios del tab!!
Hola soy la galeria del tab!!
Hola soy el porfolio del tab!!
Hola soy el inicio del tab!!
Hola soy los servicios del tab!!
Hola soy la galeria del tab!!
Hola soy el porfolio del tab!!
Contenido Complejo
Ahora vamos a inicializar tabs con contenidos mas complejos lo cual hace menos manejable el código.
A partir de la versión 5.0.0 se pude desvincular la lóca de los elementos tabs
de las vistas, es necesario entender que la función de inicialización del Tab en
realidad lo que devuelve es una instancia de una clase definida en JS.
Se recomienda ver el código fuente para entenderlo mejor: Tabs.js.
// Evento click del botón
document.getElementById("desactivador").addEventListener("click", () => {
/**
BS.TabInit() devuelve una instancia nueva de la clase tabs, por esta razón
al momento de destruir el tabs debemos pasarle el ID por parámetro a la
método destroy.
*/
// Deshabilita el #ta1
BS.TabInit().destroy("#ta1")
// Deshabilita el #ta2
BS.TabInit().destroy("#ta2")
// Deshabilita el #ta3
BS.TabInit().destroy("#ta3")
// Deshabilita el #ta4
BS.TabInit().destroy("#ta4")
// Deshabilita el #ta5
BS.TabInit().destroy("#ta5")
// Muestra El toast por pantalla
BS.Toast({html: "Tabs Destruidos", clases: ["bg-red"]})
})
