Tabs

Le composant onglet permet aux utilisateurs de naviguer dans différentes sections de contenu au sein d’une même page.

Le système d’onglet aide à regrouper différents contenus dans un espace limité et permet de diviser un contenu dense en sections accessibles individuellement afin de faciliter la lecture pour l’utilisateur.

Vue d’ensemble

Le rendu de base du TabsComponent

Code

= dsfr_tabs do |tabs|
  - tabs.tab title: "Onglet 1", active: true do
    %p Contenu de l’onglet 1
  - tabs.tab title: "Onglet 2" do
    %p Contenu de l’onglet 2

Résultat

Contenu de l’onglet 1

Contenu de l’onglet 1

Contenu de l’onglet 2 

<div class="fr-tabs">
  <ul class="fr-tabs__list" role="tablist" aria-label="">
    <li role="presentation">
      <button id="tab-onglet-1-nav" class="fr-tabs__tab" role="tab" aria-selected="true" aria-controls="tab-onglet-1-panel">
        Onglet 1
      </button>
    </li>
    <li role="presentation">
      <button id="tab-onglet-2-nav" class="fr-tabs__tab" role="tab" aria-selected="false" aria-controls="tab-onglet-2-panel">
        Onglet 2
      </button>
    </li>
  </ul>
  <div id="tab-onglet-1-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tab-onglet-1-nav">
    <p>
      Contenu de l’onglet 1
    </p>
  </div>
  <div id="tab-onglet-2-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-onglet-2-nav">
    <p>
      Contenu de l’onglet 1
    </p>
    <p>
      Contenu de l’onglet 2
    </p>
  </div>
</div>

Onglets avec des icônes

Vous pouvez utiliser des icônes pour illustrer les onglets.

Code

= dsfr_tabs do |tabs|
  - tabs.tab title: "Comment ça marche ?", icon: "info-fill" do
    %p Ça marche bien
  - tabs.tab title: "Contact", icon: "mail-line" do
    %p Contactez-nous par email
  - tabs.tab title: "Support", active: true, icon: "settings-5-line" do
    %p Support technique

Résultat

Ça marche bien

Ça marche bien

Contactez-nous par email

Ça marche bien

Contactez-nous par email

Support technique 

<div class="fr-tabs">
  <ul class="fr-tabs__list" role="tablist" aria-label="">
    <li role="presentation">
      <button id="tab-comment-ca-marche-nav" class="fr-tabs__tab fr-icon-info-fill fr-tabs__tab--icon-left" role="tab" aria-selected="false" aria-controls="tab-comment-ca-marche-panel">
        Comment ça marche ?
      </button>
    </li>
    <li role="presentation">
      <button id="tab-contact-nav" class="fr-tabs__tab fr-icon-mail-line fr-tabs__tab--icon-left" role="tab" aria-selected="false" aria-controls="tab-contact-panel">
        Contact
      </button>
    </li>
    <li role="presentation">
      <button id="tab-support-nav" class="fr-tabs__tab fr-icon-settings-5-line fr-tabs__tab--icon-left" role="tab" aria-selected="true" aria-controls="tab-support-panel">
        Support
      </button>
    </li>
  </ul>
  <div id="tab-comment-ca-marche-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-comment-ca-marche-nav">
    <p>
      Ça marche bien
    </p>
  </div>
  <div id="tab-contact-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-contact-nav">
    <p>
      Ça marche bien
    </p>
    <p>
      Contactez-nous par email
    </p>
  </div>
  <div id="tab-support-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tab-support-nav">
    <p>
      Ça marche bien
    </p>
    <p>
      Contactez-nous par email
    </p>
    <p>
      Support technique
    </p>
  </div>
</div>

Onglets avec des liens

Les boutons de navigation des onglets peuvent être des transformés en liens vers d’autres pages en utilisant le paramètre path.

Cela permet entre-autres d’utiliser Turbo Drive pour naviguer entre les onglets. Chaque page affiche uniquement un onglet actif avec son contenu et les liens vers les autres onglets. L’onglet actif n’a pas besoin d’avoir de lien, il peut rester un bouton.

Code

= dsfr_tabs do |tabs|
  - tabs.tab title: "Première page", path: "#onglet-1"
  - tabs.tab title: "Deuxième page", active: true do
    %p Contenu de l’onglet 2
  - tabs.tab title: "Troisième page", path: "#onglet-3"

Résultat

Contenu de l’onglet 2 

<div class="fr-tabs">
  <ul class="fr-tabs__list" role="tablist" aria-label="">
    <li role="presentation">
      <a href="#onglet-1" data-turbo-action="advance" id="tab-premiere-page-nav" class="fr-tabs__tab" role="tab" aria-selected="false" aria-controls="tab-premiere-page-panel">
        Première page
      </a>
    </li>
    <li role="presentation">
      <button id="tab-deuxieme-page-nav" class="fr-tabs__tab" role="tab" aria-selected="true" aria-controls="tab-deuxieme-page-panel">
        Deuxième page
      </button>
    </li>
    <li role="presentation">
      <a href="#onglet-3" data-turbo-action="advance" id="tab-troisieme-page-nav" class="fr-tabs__tab" role="tab" aria-selected="false" aria-controls="tab-troisieme-page-panel">
        Troisième page
      </a>
    </li>
  </ul>
  <div id="tab-premiere-page-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-premiere-page-nav">
  </div>
  <div id="tab-deuxieme-page-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tab-deuxieme-page-nav">
    <p>
      Contenu de l’onglet 2
    </p>
  </div>
  <div id="tab-troisieme-page-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tab-troisieme-page-nav">
  </div>
</div>

Plus d’informations