Sommaire

Les composants à onglets

1. Les objectifs

Les composants à onglets permettent d’insérer du contenu rédactionnel lorsque que n’avez pas beaucoup de place. Chaque onglet possède un titre cliquable et un volet qui affiche le contenu cliqué.

Attention, ce composant utilise du JavaScript, veillez à ce que les liaisons vers tous les fichiers soient bien implémentées. Reportez-vous au chapitre Installer Foundation, à la section Foundation complet - Les liaisons.

2. Les onglets horizontaux

Par défaut les composants à onglets s’affichent horizontalement.

Dans un premier temps, vous devez indiquer les titres des onglets dans une liste <ul> utilisant la classe .tabs, l’attribut data-tabs et un identifiant unique id="voyage".

<ul class="tabs" data-tabs id="voyage"> 
  ... 
</ul>

Ensuite, chaque item <li> de cette liste correspond à un titre d’onglet. Chaque <li> utilise la classe .tabs-title. Si vous souhaitez qu’un item soit affiché, ajoutez la classe .is-active.

Dans chaque <li>, il faut insérer un lien <a> qui permettra d’afficher le contenu correspondant. La cible href de chaque lien est une ancre qui aura pour valeur l’identifiant unique du contenu de chaque onglet ciblé.

Voici le code de la liste des titres des onglets :

<ul class="tabs" data-tabs id="voyage"> 
  <li class="tabs-title is-active"><a ...