Framework7 - Pestañas

Descripción

Las pestañas son conjuntos de contenido agrupado lógicamente que nos permiten cambiar rápidamente entre ellas y ahorrar espacio como acordeones.

Diseño de pestañas

El siguiente código define el diseño de las pestañas:

<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
   <!-- The tab, should have "tab" class and unique id attribute -->
   
   <!-- The tab is active by default - "active" class -->
   <div class = "tab active" id = "tab1">
      ...  The content for Tab 1 goes here ...
   </div>
   
   <!-- The second tab, should have "tab" class and unique id attribute -->
   <div class = "tab" id = "tab2">
      ... The content for Tab 2 goes here ...
   </div>
</div>

Donde -

• <div class = "tabs">- Es un contenedor obligatorio para todas las pestañas. Si pasamos por alto esto, las pestañas no funcionarán en absoluto.

• <div class = "tab"> - Es una sola pestaña, que debería tener unique id atributo.

• <div class = "tab active">- Es una sola pestaña activa, que utiliza una clase activa adicional para hacer que la pestaña sea visible (activa).

Cambiar entre pestañas

Puede usar algún controlador en el diseño de pestañas, para que el usuario pueda cambiar entre ellos.

Para esto, necesita crear enlaces (etiquetas <a>) con la clase de enlace de pestaña y el atributo href igual al atributo id de la pestaña de destino -

<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1)  -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>

<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2)  -->
<a href = "#tab2" class = "tab-link">Tab 2</a>

<a href = "#tab3" class = "tab-link">Tab 3</a>

Cambiar varias pestañas

Si está utilizando un enlace de pestaña única para cambiar entre varias pestañas, puede usar clases en lugar de usar ID y atributos de pestaña de datos .

<!-- For Top Tabs  -->
<div class = "tabs tabs-top">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Tabs links -->
<div class = "tab-links">
   <!-- Links are switch top and bottom tabs to .tab1 -->
   <a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
   <!-- Links are switch top and bottom tabs to .tab2 -->
   <a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
   <!-- Links are switch top and bottom tabs to .tab3 -->
   <a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>

La lengüeta de datos de atributo de la pestaña de vínculos contiene selector CSS de destino TAB / pestañas.

Podemos utilizar diferentes formas de pestañas, estas se especifican en la siguiente tabla -

S. No	Tipos de pestañas y descripción
1	Pestañas en línea Las pestañas en línea son conjuntos de agrupaciones en línea que le permiten cambiar rápidamente entre ellas.
2	Cambiar pestañas desde la barra de navegación Podemos colocar pestañas en la barra de navegación que le permiten alternar entre ellas.
3	Cambiar vistas desde la barra de pestañas Se puede usar una sola pestaña para cambiar entre vistas con su propia navegación y diseño.
4	Pestañas animadas Puede utilizar una transición simple (animación) para cambiar de pestaña.
5	Pestañas deslizables Puede crear pestañas deslizables con una transición simple utilizando la clase tabs-swipeable-wrap para las pestañas.
6	Fichas Eventos JavaScript Los eventos de JavaScript se pueden utilizar cuando se trabaja con código JavaScript para las pestañas.
7	Mostrar pestaña usando JavaScript Puede cambiar o mostrar la pestaña utilizando métodos de JavaScript.