Bootstrap 4 : les onglets (Tab)
Lundi 16 avril 2018 16:55
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.
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
<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.
Par bestmomo
Nombre de commentaires : 5