Framework7 - Guias

Descrição

As guias são conjuntos de conteúdo agrupados logicamente que nos permitem alternar rapidamente entre elas e economiza espaço como acordeões.

Layout das guias

O código a seguir define o layout das guias -

<!-- 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>

Onde -

• <div class = "tabs">- É um wrapper obrigatório para todas as guias. Se perdermos isso, as guias não funcionarão.

• <div class = "tab"> - É uma única guia, que deve ter unique id atributo.

• <div class = "tab active">- É uma única guia ativa, que usa classe ativa adicional para tornar a guia visível (ativa).

Alternando entre as guias

Você pode usar algum controlador no layout de guias, para que o usuário possa alternar entre eles.

Para isso, você precisa criar links (<a> tags) com a classe tab-link e o atributo href igual ao atributo id da guia alvo -

<!-- 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>

Alternar várias guias

Se você estiver usando um link de guia única para alternar entre várias guias, poderá usar classes em vez de usar IDs e atributo de guia de dados .

<!-- 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>

O atributo data-tab de tab-link contém seletor CSS de tab / tabs de destino.

Podemos usar diferentes formas de guias, estas são especificadas na tabela a seguir -