Bootstrap 4 : les onglets (Tab)
On a vu ce que nous propose Bootstrap pour la navigation. Dans ce chapitre nous allons utiliser les classes de bases déjà vues en ajoutant de l’interactivité pour créer des onglets.
Le principe
Ce plugin nécessite 2 groupes éléments :
- des onglets avec chacun l’attribut data-toggle= »tab » ou data-toggle= »pill », selon l’aspect désiré, on ajoute la classe active à l’onglet actif au chargement,
- un groupe de panneaux avec la classe tab-content.
Pour chacun des panneaux on utilise la classe tab-pane, en prévoyant la classe active pour le panneau qui doit apparaître au chargement.
Il faut établir un lien entre chaque onglet et le panneau qui lui correspond. Cela se fait en attribuant à chaque panneau un identifiant référencé par un attribut href au niveau de l’onglet.
Ce qu’on peut schématiser ainsi :
Aspect « tabs »
Donc dans sa version la plus épurée on a ce code avec 2 onglets et un aspect « tabs » :
<nav class="nav nav-tabs"> <a class="nav-item nav-link active" href="#p1" data-toggle="tab">Onglet 1</a> <a class="nav-item nav-link" href="#p2" data-toggle="tab">Onglet 2</a> </nav> <div class="tab-content"> <div class="tab-pane active" id="p1">Panneau 1</div> <div class="tab-pane" id="p2">Panneau 2</div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.0/umd/popper.min.js"></script> <script src="js/bootstrap.min.js"></script>
Le plugin fonctionne aussi avec des balises ul et li à la place de nav.
Aspect « pills »
Voici le code avec aspect « pills » :
<nav class="nav nav-pills"> <a class="nav-item nav-link active" href="#p1" data-toggle="tab">Onglet 1</a> <a class="nav-item nav-link" href="#p2" data-toggle="tab">Onglet 2</a> </nav> <div class="tab-content"> <div class="tab-pane active" id="p1">Panneau 1</div> <div class="tab-pane" id="p2">Panneau 2</div> </div>
Quelques effets
Transition progressive
Pour obtenir un effet progressif, il suffit d’ajouter la classe fade pour chacun des panneaux. D’autre part il faut prévoir la classe show pour le panneau qui doit s’afficher au chargement de manière à faire apparaître le panneau et avoir une animation à ce moment là également :
<nav class="nav nav-tabs"> <a class="nav-item nav-link active" href="#p1" data-toggle="tab">Onglet 1</a> <a class="nav-item nav-link" href="#p2" data-toggle="tab">Onglet 2</a> </nav> <div class="tab-content"> <div class="tab-pane fade show active" id="p1">Panneau 1</div> <div class="tab-pane fade" id="p2">Panneau 2</div> </div>
Empilage
Si la disposition en ligne ne vous convient pas vous pouvez empiler les onglets en utilisant flexbox avec la classe flex-column :
<nav class="nav nav-pills flex-column"> <a class="nav-item nav-link active" href="#paccueil" data-toggle="tab">Accueil</a> <a class="nav-item nav-link" href="#livres" data-toggle="tab">Livres</a> <a class="nav-item nav-link" href="#temoignages" data-toggle="tab">Témoignages</a> </nav> <div class="tab-content"> <div class="tab-pane active" id="accueil">Texte d'accueil</div> <div class="tab-pane" id="livres">Tous les livres</div> <div class="tab-pane" id="temoignages">Tous les témoignages</div> </div>
Désactiver un onglet
Vous pouvez marquer un onglet comme inactif avec la classe disabled :
<nav class="nav nav-pills flex-column"> <a class="nav-item nav-link active" href="#accueil" data-toggle="tab">Accueil</a> <a class="nav-item nav-link" href="#livres" data-toggle="tab">Livres</a> <a class="nav-item nav-link" href="#temoignages" data-toggle="tab">Témoignages</a> </nav> <div class="tab-content"> <div class="tab-pane active" id="accueil">Texte d'accueil</div> <div class="tab-pane" id="livres">Tous les livres</div> <div class="tab-pane" id="temoignages">Tous les témoignages</div> </div>
Menu déroulant
Pour avoir un menu déroulant dans un onglet, il faut utiliser le plugin dropdown que nous avons déjà vu :
<nav class="nav nav-tabs"> <a class="nav-item nav-link active" href="#accueil" data-toggle="tab">Accueil</a> <div class="dropdown"> <a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#">Livres</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#policiers" data-toggle="tab">Policiers</a> <a class="dropdown-item" href="#romans" data-toggle="tab">Romans</a> <a class="dropdown-item" href="#contes" data-toggle="tab">Contes</a> </div> </div> <a class="nav-item nav-link" href="#temoignages" data-toggle="tab">Témoignages</a> </nav> <div class="tab-content"> <div class="tab-pane active" id="accueil">Texte d'accueil</div> <div class="tab-pane" id="temoignages">Tous les témoignages</div> <div class="tab-pane" id="policiers">Tous les livres policiers</div> <div class="tab-pane" id="romans">Tous les romans</div> <div class="tab-pane" id="contes">Tous les contes</div> </div>
Pour que le menu déroulant soit actif il faut prévoir la librairie popper.js (ou utiliser la version bundle de Bootstrap).
On peut évidemment prévoir un menu déroulant avec l’aspect « pills » :
<nav class="nav nav-pills"> <a class="nav-item nav-link active" href="#accueil" data-toggle="tab">Accueil</a> <div class="dropdown"> <a class="nav-item nav-link dropdown-toggle" data-toggle="dropdown" href="#">Livres</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#policiers" data-toggle="tab">Policiers</a> <a class="dropdown-item" href="#romans" data-toggle="tab">Romans</a> <a class="dropdown-item" href="#contes" data-toggle="tab">Contes</a> </div> </div> <a class="nav-item nav-link" href="#temoignages" data-toggle="tab">Témoignages</a> </nav> <div class="tab-content"> <div class="tab-pane active" id="accueil">Texte d'accueil</div> <div class="tab-pane" id="temoignages">Tous les témoignages</div> <div class="tab-pane" id="policiers">Tous les livres policiers</div> <div class="tab-pane" id="romans">Tous les romans</div> <div class="tab-pane" id="contes">Tous les contes</div> </div>
Accessibilité
Un groupement d’étiquettes équipées d’un mécanisme pour afficher des panneaux doit comporter les rôles tablist et tab. Il faut le compléter en repérant les panneaux avec le rôle tabpanel. D’autre part il faut compléter avec des attributs aria-*.
Voici un exemple de mise en œuvre :
<nav class="nav nav-pills" role="tablist"> <a class="nav-item nav-link active" id="accueil-tab" href="#accueil" data-toggle="tab" role="tab" aria-controls="accueil" aria-expanded="true">Accueil</a> <a class="nav-item nav-link" id="livres-tab" href="#livres" data-toggle="tab" role="tab" aria-controls="livres">Livres</a> <a class="nav-item nav-link" id="temoignages-tab" href="#temoignages" data-toggle="tab" role="tab" aria-controls="temoignages">Témoignages</a> </nav> <div class="tab-content"> <div class="tab-pane active" id="accueil" role="tabpanel" aria-labelledby="accueil-tab">Texte d'accueil</div> <div class="tab-pane" id="livres" aria-labelledby="livres-tab">Tous les livres</div> <div class="tab-pane" id="temoignages" aria-labelledby="temoignages-tab">Tous les témoignages</div> </div>
Activation avec Javascript
Un exemple
Nous avons ci-dessus activé le plugin avec la propriété data-toggle= »tab ». Il est aussi possible d’utiliser le plugin directement avec du Javascript. Voici un exemple sans la propriété renseignée :
<nav class="nav nav-tabs"> <a class="nav-item nav-link active" href="#accueil">Accueil</a> <a class="nav-item nav-link" href="#livres">Livres</a> <a class="nav-item nav-link" href="#temoignages">Témoignages</a> </nav> <div class="tab-content"> <div class="tab-pane active" id="accueil">Texte d'accueil</div> <div class="tab-pane" id="livres">Tous les livres</div> <div class="tab-pane" id="temoignages">Tous les témoignages</div> </div>
Les onglets sont devenus inactifs. Pour que ça fonctionne il faut ajouter un peu de Javascript :
$('a').click(function (e) { e.preventDefault() $(this).tab('show') })
Tous les onglets doivent être activés, c’est pour cette raison que j’ai choisi pour ma page le sélecteura qui est sans ambiguïté.
Les événements
Vous disposez également de 4 événements pour ce plugin :
- show.bs.tab : se déclenche dès l’appel à la méthode show avant que le panneau n’apparaisse
- shown.bs.tab : se déclenche lorsque le panneau devient visible
- hide.bs.tab : se déclenche lorsqu’un panneau va devenir invisible
- hidden.bs.tab : se déclenche lorsqu’un panneau est devenu invisible
D’autre part il est possible de connaître l’onglet actif avec event.target et l’onglet précédemment sélectionné avec event.relatedTarget. On va utiliser tout cela pour afficher le nom de l’onglet actuel et du précédent à chaque changement. On va donc ajouter le code HTML pour accueillir l’information :
<nav class="nav nav-tabs"> <a class="nav-item nav-link active" href="#accueil">Accueil</a> <a class="nav-item nav-link" href="#livres">Livres</a> <a class="nav-item nav-link" href="#temoignages">Témoignages</a> </nav> <div class="tab-content"> <div class="tab-pane active" id="accueil">Texte d'accueil</div> <div class="tab-pane" id="livres">Tous les livres</div> <div class="tab-pane" id="temoignages">Tous les témoignages</div> </div> <hr> <p><strong>Onglet actif </strong>: <span id='actif'></span></p> <p><strong>Onglet précédent </strong>: <span id='precedent'></span></p>
Il ne reste plus qu’à prévoir le code Javascript pour déclencher le plugin et mettre en place l’écoute de l’événement et agir en conséquence :
$('a') .click(function (e) { e.preventDefault() $(this).tab('show') }) .on('shown.bs.tab', function (e) { $('#actif').text($(e.target).text()) $('#precedent').text($(e.relatedTarget).text()) })
En résumé
- Les onglets permettent sur un même espace d’afficher au choix plusieurs contenus avec un simple clic.
- Les onglets sont faciles à organiser : horizontaux, empilés, simples liens ou boutons.
- On peut aussi intégrer un menu déroulant dans un onglet.
5 commentaires
Nathaly
Bonjour,
Il y a un problème avec les menus déroulant, il n’est pas possible de revenir sur une des pages après l’avoir déjà visité.
Je pense que c’est dû au fait que les class active et show ne sont pas supprimé lorsqu’on change d’onglet.
Doit-on gérer les class avec du javascript ?
bestmomo
Bonjour,
Oui effectivement, ça fonctionnait avec Bootstrap 3 mais avec la version 4 ça coince, il faut que je vois de plus près…
Edit : après un peu de recherche je vois que le bug est connu mais apparemment pas encore résolu. Il y a une solution provisoire sur la page du bug.
GrCOTE7
Pour ce menu déroulant, un exemple opérationnel:
Code complet visible ici:
https://gitlab.com/grcote7/manudon/blob/master/tutos/bootstrap/exemples/index_b.html
http://prntscr.com/ow7erm
GrCOTE7
Désolé Maurice… Le code pour inséré du code ne semble pas être celui du .md, du coup, la présentation laisse bien à désirer :-(…
GrCOTE7
Mais c’est aussi visible ici:
http://manudon.com/tutos/bootstrap/exemples/index_b.html