Explorer le système

Pour commencer

Accédez aux outils et aux éléments de base qui permettent de concevoir et de mettre au point des expériences cohérentes et accessibles.

Développer Conception

Onglets

Les onglets permettent aux utilisateurs de naviguer entre des sections de contenus connexes sur une même page.

Onglets

Les onglets permettent aux utilisateurs de passer rapidement d’un panneau de contenu à un autre sans avoir à faire défiler les pages ou à naviguer entre elles. Les onglets doivent uniquement être utilisés lorsque les utilisateurs n’ont pas besoin de voir le contenu de plusieurs onglets en même temps. Ils ne doivent jamais être utilisés pour créer des liens vers des pages ou des sections de pages différentes. Les onglets sont des composants à largeur fluide dont la taille s’adapte à celle de leur contenu et de leur conteneur parent.

À faire

  • Rédigez de courts libellés.
  • Assurez-vous que chaque onglet correspond à un contenu unique.
  • Classez les onglets par ordre d’importance de gauche à droite.
  • Tentez de vous limiter à trois onglets pour éviter que les onglets n’apparaissent sur plusieurs lignes sur les petits écrans et les appareils mobiles.

À ne pas faire

  • N’emboîtez pas d’onglets, d’accordéons ou tout autre composant interactif à l’intérieur d’un onglet.
  • Ne liez pas les onglets à des pages distinctes.
  • Ne tronquez pas les libellés des onglets.
  • Évitez d’écrire les libellés des onglets en MAJUSCULES.
  • Ne présentez pas les informations que les utilisateurs pourraient vouloir comparer dans différents onglets.

Onglets

Premier onglet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis lacinia massa, ac suscipit risus rutrum sed. Nulla elementum a felis et sagittis. Nam sodales ex at dui porta pulvinar. Nunc sagittis magna nec lorem convallis tristique.

Deuxième onglet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis lacinia massa, ac suscipit risus rutrum sed. Nulla elementum a felis et sagittis. Nam sodales ex at dui porta pulvinar. Nunc sagittis magna nec lorem convallis tristique. Quisque lobortis lacinia massa, ac suscipit risus rutrum sed. Nulla elementum a felis et sagittis. Nam sodales ex at dui porta pulvinar.

Nunc sagittis magna nec lorem convallis tristique.

Troisième onglet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis lacinia massa, ac suscipit risus rutrum sed. Nulla elementum a felis et sagittis. Nam sodales ex at dui porta pulvinar.

HTML

<div class="gnb-tabs">
    <nav>
        <ul role="tablist">
            <li>
                <button class="tablinks active" onclick="openTab(event, '1')">Premier</button>
            </li>
            <li>
                <button class="tablinks" onclick="openTab(event, '2')">Deuxième</button>
            </li>
            <li>
                <button class="tablinks" onclick="openTab(event, '3')">Troisième</button>
            </li>
        </ul>
    </nav>
    
    <div id="1" class="tabcontent active" style="display: block;">
        <h3>Premier onglet</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipscing elit. Quisque lobortis lacinia massa, ac suscipit risus rutrum sed.
        </p>
    </div>
    <div id="2" class="tabcontent">
        <h3>Deuxième onglet</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipscing elit. Quisque lobortis lacinia massa, ac suscipit risus rutrum sed.
        </p>
    </div>
    <div id="3" class="tabcontent">
        <h3>Troisième onglet</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipscing elit. Quisque lobortis lacinia massa, ac suscipit risus rutrum sed.
        </p>
    </div>
</div>

<!-- Ajoutez ceci en bas de votre page avant la balise de fermeture du corps -->
<script src="gnb-tabs-1.0.0.js"></script>