Tabs (Onglets)

Le composant onglets permet de positioner plusieurs sections de contenu au même endroit, en affichant une section à la fois. Cliquer sur un onglet affiche le contenu de la section associée. Le comportement ressemble à celui d’onglets dans une application, comme ceux d’un navigateur.

Usage

  • Le composant onglets est composé d’au moins 2 onglets.
  • Un onglet se présente sous 2 états : standard / actif.
  • Il existe 2 variantes :
    • Inline (en ligne)
    • Full-width (pleine largeur)
  • Lorsque le nombre d’onglets dépasse la largeur de la colonne, on peut faire glisser la liste d’un simple toucher-glisser pour les écrans tactiles, ou d’un clic sur les boutons-flèches pour les tablettes et desktop.

Style & code

Dépendances :

Onglets inline

Cas minimal

Le cas minimal est une suite d’onglets se suivant naturellement et dont la largeur dépend de leur intitulé. Dans ce cas, l’espace libre à droite du dernier onglet est totalement vide. Pour créer ces onglets, il faut une liste de liens correspondant à chaque onglet voulu et des blocs contenant le contenu associé à chacun de ces onglets. La liste de liens devrait se trouver dans une balise <nav> pour respecter les normes du HTML5 et être plus accessibles. Le fonctionnement de ces onglets s’appuie sur la fonctionnalité JS Onglet.

Liste des classes obligatoires :

  • La liste doit porter la classe su-tabs.
  • Chaque élément structurant des onglets (onglets + blocs de contenu) doit avoir une classe d’identification unique (ici : tab-id-1).
  • Chaque bloc de contenu doit porter une classe su-tab-content-*n* où n est un nombre représentant l’ordre du contenu.

Ensuite, pour apporter l’interactivité, il faut ajouter les paramètres de `data-suonglet :

  • cont pour indiquer l’identifiant unique des éléments concernés,
  • ong pour cibler le contenu à afficher. 
<nav>
    <ul class="su-tabs">
        <li><a class="tab-id-1 su-tab-on" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-1"}'>Onglet 1</a></li>
        <li><a class="tab-id-1" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-2"}'>Onglet 2</a></li>
        <li><a class="tab-id-1" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-3"}'>Onglet 3</a></li>
        <li><a class="tab-id-1" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-4"}'>Onglet 4</a></li>
    </ul>
</nav>
<div class="tab-id-1 su-tab-content-1 su-tab-on">1. Contenu onglet 1</div>
<div class="tab-id-1 su-tab-content-2">2. Contenu onglet 2</div>
<div class="tab-id-1 su-tab-content-3">3. Contenu onglet 3</div>
<div class="tab-id-1 su-tab-content-4">4. Contenu onglet 4</div>

Cas avec contenu plus large que le conteneur

Si la largeur totale des onglets est supérieure à la largeur du conteneur, SipaUI rendra automatiquement la ligne d’onglet scrollable horizontalement. Toutefois, ce n’est pas suffisant pour rendre le composant ergonomique. Il faut donc rajouter divers éléments :

<div class="su-row">
    <section class="su-col-md-12">
        <nav class="su-carrousel snap-migrate">
            <ul class="su-tabs su-carrousel-container" data-suswipe='{"sel":"li","halfSwipe":true,"rambo":false}'>
                <li><a class="tab-id-2 su-tab-on" href="javascript:;" data-suonglet='{"cont":".tab-id-2","ong":".su-tab-content-1"}'>1. Lorem</a></li>
                <li><a class="tab-id-2" href="javascript:;" data-suonglet='{"cont":".tab-id-2","ong":".su-tab-content-2"}'>2. Ipsum dolor sit amet</a></li>
                <li><a class="tab-id-2" href="javascript:;" data-suonglet='{"cont":".tab-id-2","ong":".su-tab-content-3"}'>3. Consectetur adipisicing elit</a></li>
                <li><a class="tab-id-2" href="javascript:;" data-suonglet='{"cont":".tab-id-2","ong":".su-tab-content-4"}'>4. Sed do eiusmod tempor incididunt</a></li>
                <li><a class="tab-id-2" href="javascript:;" data-suonglet='{"cont":".tab-id-2","ong":".su-tab-content-5"}'>5. Ut enim ad minim veniam</a></li>
            </ul>
            <button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
            <button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
        </nav>
        <div class="tab-id-2 su-tab-content-1 su-tab-on">1. Contenu onglet 1</div>
        <div class="tab-id-2 su-tab-content-2">2. Contenu onglet 2</div>
        <div class="tab-id-2 su-tab-content-3">3. Contenu onglet 3</div>
        <div class="tab-id-2 su-tab-content-4">4. Contenu onglet 4</div>
        <div class="tab-id-2 su-tab-content-5">5. Contenu onglet 5</div>
    </section>
</div>

Onglets sur fond sombre

Il est possible d’utiliser le composant onglets sur un fond sombre en positionnant la classe su-negative à côté de la classe sipaui, ou sur un parent de su-tabs…

<div class="su-row" style="background: DimGray; padding: 10px">
    <section class="su-col-md-12 su-negative">
        <nav class="su-carrousel snap-migrate">
            <ul class="su-tabs su-carrousel-container" data-suswipe='{"sel":"li","halfSwipe":true,"rambo":false}'>
                <li><a class="tab-id-2 su-tab-on" href="javascript:;" data-suonglet='{"cont":".tab-id-2","ong":".su-tab-content-1"}'>1. Lorem</a></li>
                <li><a class="tab-id-2" href="javascript:;" data-suonglet='{"cont":".tab-id-2","ong":".su-tab-content-2"}'>2. Ipsum dolor sit amet</a></li>
                <li><a class="tab-id-2" href="javascript:;" data-suonglet='{"cont":".tab-id-2","ong":".su-tab-content-3"}'>3. Consectetur adipisicing elit</a></li>
                <li><a class="tab-id-2" href="javascript:;" data-suonglet='{"cont":".tab-id-2","ong":".su-tab-content-4"}'>4. Sed do eiusmod tempor incididunt</a></li>
                <li><a class="tab-id-2" href="javascript:;" data-suonglet='{"cont":".tab-id-2","ong":".su-tab-content-5"}'>5. Ut enim ad minim veniam</a></li>
            </ul>
            <button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
            <button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
        </nav>
        <div class="tab-id-2 su-tab-content-1 su-tab-on">1. Contenu onglet 1</div>
        <div class="tab-id-2 su-tab-content-2">2. Contenu onglet 2</div>
        <div class="tab-id-2 su-tab-content-3">3. Contenu onglet 3</div>
        <div class="tab-id-2 su-tab-content-4">4. Contenu onglet 4</div>
        <div class="tab-id-2 su-tab-content-5">5. Contenu onglet 5</div>
    </section>
</div>

Onglets en pleine largeur

Il y a moyen de faire en sorte que le composant onglets prenne toute la largeur de son conteneur. Pour cela 2 solutions :

  • on fait en sorte que le conteneur des onglets s’élargisse jusqu'au bord droit (via son filet du bas ou via son fond, en fonction des thèmes…)
  • on fait en sorte que les onglets eux-mêmes s’élargissent pour prendre tout l’espace disponible.

Attention, le second cas implique 3 conséquences importantes :

  1. Vous devez maîtriser les intitulés et le nombre de ces onglets pour que la somme de leurs largeurs ne soit pas supérieure à celle du conteneur.
  2. Si le nombre d’onglets est trop faible par rapport à la largeur du parent, il y aura trop de vide entre les onglets, ce qui risque d’être « assez » inesthétique.
  3. Vous ne pourrez pas dans ce cas faire des onglets en carrousel (scrollables horizontalement).

Cas de pleine largeur du conteneur

Ici, avec la classe su-fullwidth à côté de su-tabs, on fait en sorte que la zone des onglets fasse toute la largeur du parent.

<nav>
    <ul class="su-tabs su-fullwidth">
        <li><a class="tab-id-1 su-tab-on" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-1"}'>Onglet 1</a></li>
        <li><a class="tab-id-1" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-2"}'>Onglet 2</a></li>
        <li><a class="tab-id-1" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-3"}'>Onglet 3</a></li>
        <li><a class="tab-id-1" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-4"}'>Onglet 4</a></li>
    </ul>
</nav>
<div class="tab-id-1 su-tab-content-1 su-tab-on">1. Contenu onglet 1</div>
<div class="tab-id-1 su-tab-content-2">2. Contenu onglet 2</div>
<div class="tab-id-1 su-tab-content-3">3. Contenu onglet 3</div>
<div class="tab-id-1 su-tab-content-4">4. Contenu onglet 4</div>

Ce cas est compatible avec la gestion en carrousel quand il y a trop d’onglets :

<div class="su-row">
    <section class="su-col-md-16">
        <nav class="su-carrousel snap-migrate">
            <ul class="su-tabs su-fullwidth su-carrousel-container" data-suswipe='{"sel":"li","halfSwipe":true,"rambo":false}'>
                <li><a class="tab-id-2 su-tab-on" href="javascript:;" data-suonglet='{"cont":".tab-id-2","ong":".su-tab-content-1"}'>1. Lorem</a></li>
                <li><a class="tab-id-2" href="javascript:;" data-suonglet='{"cont":".tab-id-2","ong":".su-tab-content-2"}'>2. Ipsum dolor sit amet</a></li>
                <li><a class="tab-id-2" href="javascript:;" data-suonglet='{"cont":".tab-id-2","ong":".su-tab-content-3"}'>3. Consectetur adipisicing elit</a></li>
                <li><a class="tab-id-2" href="javascript:;" data-suonglet='{"cont":".tab-id-2","ong":".su-tab-content-4"}'>4. Sed do eiusmod tempor incididunt</a></li>
                <li><a class="tab-id-2" href="javascript:;" data-suonglet='{"cont":".tab-id-2","ong":".su-tab-content-5"}'>5. Ut enim ad minim veniam</a></li>
            </ul>
            <button class="su-navigation-button su-inside su-left su-inactive" data-suswipeprev><i class="su-icon">gauche</i></button>
            <button class="su-navigation-button su-inside su-right" data-suswipenext><i class="su-icon">droite</i></button>
        </nav>
        <div class="tab-id-2 su-tab-content-1 su-tab-on">1. Contenu onglet 1</div>
        <div class="tab-id-2 su-tab-content-2">2. Contenu onglet 2</div>
        <div class="tab-id-2 su-tab-content-3">3. Contenu onglet 3</div>
        <div class="tab-id-2 su-tab-content-4">4. Contenu onglet 4</div>
        <div class="tab-id-2 su-tab-content-5">5. Contenu onglet 5</div>
    </section>
</div>

Cas de distribution des onglets

Ici, avec la classe su-distributed à côté de su-tabs, on fait en sorte que chaque onglets se répartissent la largeur du parent. Dans cet exemple, dans certaines largeurs de fenêtre (comme en mobile ici), les derniers onglets seront tronqués (mais ils restent glissables)…

<div class="su-row">
    <section class="su-col-md-18">
        <nav>
            <ul class="su-tabs su-distributed">
                <li><a class="tab-id-1 su-tab-on" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-1"}'>Onglet 1</a></li>
                <li><a class="tab-id-1" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-2"}'>Onglet 2 un peu long</a></li>
                <li><a class="tab-id-1" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-3"}'>Onglet 3 encore plus long</a></li>
                <li><a class="tab-id-1" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-4"}'>Onglet 4</a></li>
            </ul>
        </nav>
        <div class="tab-id-1 su-tab-content-1 su-tab-on">1. Contenu onglet 1</div>
        <div class="tab-id-1 su-tab-content-2">2. Contenu onglet 2</div>
        <div class="tab-id-1 su-tab-content-3">3. Contenu onglet 3</div>
        <div class="tab-id-1 su-tab-content-4">4. Contenu onglet 4</div>
    </section>
</div>

Il est possible d’empêcher la coupure sur le dernier onglet en rajoutant la classe su-truncate-1 (disponible dans les classes d’aide) sur les liens (<a>). Cela aura pour effet de tronquer le contenu de chaque onglet trop grand (en ajoutant les « … »).

<div class="su-row">
    <section class="su-col-md-12">
        <nav>
            <ul class="su-tabs su-distributed">
                <li><a class="tab-id-1 su-truncate-1 su-tab-on" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-1"}'>Onglet 1</a></li>
                <li><a class="tab-id-1 su-truncate-1" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-2"}'>Onglet 2 un peu long</a></li>
                <li><a class="tab-id-1 su-truncate-1" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-3"}'>Onglet 3 encore plus long</a></li>
                <li><a class="tab-id-1 su-truncate-1" href="javascript:;" data-suonglet='{"cont":".tab-id-1","ong":".su-tab-content-4"}'>Onglet 4</a></li>
            </ul>
        </nav>
        <div class="tab-id-1 su-tab-content-1 su-tab-on">1. Contenu onglet 1</div>
        <div class="tab-id-1 su-tab-content-2">2. Contenu onglet 2</div>
        <div class="tab-id-1 su-tab-content-3">3. Contenu onglet 3</div>
        <div class="tab-id-1 su-tab-content-4">4. Contenu onglet 4</div>
    </section>
</div>

Ce cas n’est pas compatible avec la gestion en carrousel !

Liste des classes disponibles

  • su-tabs
  • su-tab-on
  • su-tab-content-1…
  • su-fullwidth
  • su-distributed
  • su-truncate-1
  • su-negative

Classes anexes

Autres attributs

  • data-suswipe

Le code a bien été copié !