Framework7 - Onglets

La description

Les onglets sont des ensembles de contenu groupé logiquement qui nous permettent de basculer rapidement entre eux et d'économiser de l'espace comme des accordéons.

Disposition des onglets

Le code suivant définit la disposition des onglets -

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

Où -

• <div class = "tabs">- C'est un wrapper obligatoire pour tous les onglets. Si nous manquons cela, les onglets ne fonctionneront pas du tout.

• <div class = "tab"> - C'est un seul onglet, qui devrait avoir unique id attribut.

• <div class = "tab active">- Il s'agit d'un seul onglet actif, qui utilise une classe active supplémentaire pour rendre l'onglet visible (actif).

Basculer entre les onglets

Vous pouvez utiliser un contrôleur dans la disposition des onglets, afin que l'utilisateur puisse basculer entre eux.

Pour cela, vous devez créer des liens (balises <a>) avec une classe tab-link et un attribut href égal à l' attribut id de l'onglet cible -

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

Changer d'onglets multiples

Si vous utilisez un lien d'onglet unique pour basculer entre plusieurs onglets, vous pouvez utiliser des classes au lieu d'utiliser l' attribut d' ID et d' onglet de données .

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

L' attribut data-tab de tab-link contient le sélecteur CSS des onglets / onglets cibles.

Nous pouvons utiliser différentes manières d'onglets, celles-ci sont spécifiées dans le tableau suivant -

S. Non	Types d'onglets et description
1	Onglets intégrés Les onglets en ligne sont des ensembles groupés en ligne qui vous permettent de basculer rapidement entre eux.
2	Changer d'onglet depuis la barre de navigation Nous pouvons placer des onglets dans la barre de navigation qui vous permettent de basculer entre eux.
3	Changer de vue depuis la barre d'onglets Un seul onglet peut être utilisé pour basculer entre les vues avec sa propre navigation et mise en page.
4	Onglets animés Vous pouvez utiliser une transition simple (animation) pour changer d'onglet.
5	Onglets à faire glisser Vous pouvez créer des onglets à faire glisser avec une transition simple en utilisant la classe tabs-swipeable-wrap pour les onglets.
6	Onglets Événements JavaScript Les événements JavaScript peuvent être utilisés lorsque vous travaillez avec du code JavaScript pour les onglets.
sept	Afficher l'onglet à l'aide de JavaScript Vous pouvez changer ou afficher l'onglet à l'aide de méthodes JavaScript.