Sélection de la langue

Gouvernement du Canada / Government of Canada

Manuel de conception de l'Infobase Santé

  Table des matières

Table des matières


Table des matières

Interface à onglets

Les interfaces à onglets permettent de diviser un produit de données complexe en plusieurs sections.

Sur cette page

Quand utiliser cette composante

  • Utilisez une interface à onglets pour séparer les différents aspects d'un produit de données.

Quoi éviter

  • Utilisez un maximum de 3 à 6 onglets.
  • N'utilisez une interface à onglets que si vous avez trop de contenu pour tout faire tenir dans une seule page.

Design et code

Page 1: Nom du groupe

Brève introduction au produit de données (facultatif). Une ou 2 phrases expliquant le produit.

HTML 
<section class="blue-header well well-sm brdr-0 mrgn-bttm-0 mrgn-tp-0">
  <div class="container mrgn-tp-sm">
    <h1 class="mrgn-tp-md" property="name" id="wb-cont" dir="ltr">
      <span class="stacked">
        <span>Page 1</span>: <span>Nom du groupe</span>
      </span>
    </h1>
    <ul class="list-inline small mrgn-bttm-sm" style="line-height:1.65em" id="list-inline-desktop-only">
      <li class="mrgn-rght-lg"> Dernière mise à jour : 2023-01-01</li>
      <li>
        <a class="pdf" href="#">
          <i class="fa fa-download" aria-hidden="true"></i>
          <span class="wb-invisible">Télécharger la page en format </span>PDF <span class="wb-invisible"></span>
        </a>
      </li>
      <li>
        <a class="pdf" href="#">
          <i class="fa fa-download" aria-hidden="true"></i>
          <span class="wb-invisible">Télécharger les données en format </span>CSV <span class="wb-invisible"></span>
        </a>
      </li>
    </ul>
    <p>Brève introduction au produit de données (facultatif). 1 ou 2 phrases expliquant le produit.</p>
  </div>
</section>
<section class="well well-sm brdr-0 mrgn-bttm-25 mrgn-tp-0 tabNav" style="padding:0px;">
  <div class="container">
    <nav>
      <ul class="list-inline hidden-xs hidden-sm mrgn-bttm-0">
        <li>
          <a class="active btn btn-tabs" id="active-tab" role="button" href="#">Page 1</a>
        </li>
        <li>
          <a class="btn btn-tabs" id="tab" role="button" href="./template_tabs_2_FR">Page 2</a>
        </li>
        <li>
          <a class="btn btn-tabs" id="tab" role="button" href="./template_tabs_3_FR">Page 3</a>
        </li>
        <li>
           <a class="btn btn-tabs" id="tab" role="button" href="./template_tabs_4_FR">Page 4</a>
        </li>
        <li>
          <a class="btn btn-tabs" id="tab" role="button" href="./template_tabs_5_FR">Page 5</a>
        </li>
      </ul>
      <ul class="list-unstyled hidden-md hidden-lg">
        <li>
          <a class="active btn btn-tabs-mobile" style="padding:10px 0px;" id="active-tab" role="button" href="#">Page 1</a>
        </li>
        <li>
          <a class="btn btn-tabs-mobile" id="tab" role="button" href="./template_tabs_2_FR">Page 2</a>
        </li>
        <li>
          <a class="btn btn-tabs-mobile" id="tab" role="button" href="./template_tabs_3_FR">Page 3</a>
        </li>
        <li>
          <a class="btn btn-tabs-mobile" id="tab" role="button" href="./template_tabs_4_FR">Page 4</a>
        </li>
        <li>
          <a class="btn btn-tabs-mobile" id="tab" role="button" href="./template_tabs_5_FR">Page 5</a>
        </li>
      </ul>
    </nav>
  </div>
</section>
CSS 
.tabNav a:visited {
color: #2b4380;
}
.tabNav a:visited:hover {
color: #fff;
}

.btn-tabs {
background-color: #F5F5F5;
color: #2b4380;
font-size: 20px;
font-weight: bold;
border-radius: 0px;
}
      
.btn-tabs:hover {
background-color:#26374A;
color: #FFF;
}

.btn-tabs.active {
background-color: #26374A;
color: #FFF;
font-size: 20px;
font-weight: bold;
box-shadow: none;
border-radius: 0px;
}
      

.btn-tabs-mobile {
background-color: #F5F5F5;
color: #2b4380;
font-size: 20px;
font-weight: bold;
border-radius: 0px;
padding:10px 0px
}
      

.btn-tabs-mobile.active {
background-color: #F5F5F5;
color: #26374A;
font-size: 20px;
font-weight: bold;
box-shadow: none;
border-radius: 0px;
border-bottom: 5px solid #26374A;
}
  
.btn-tabs, .btn-tabs:visited {
display: inline-block;
text-decoration: none;
}

Lignes directrices sur le contenu et le design

  • N'utilisez pas l'étiquette « Aperçu » ou « À propos de [sujet] » pour un onglet – utilisez plutôt des étiquettes d'onglets significatives et descriptives.
  • Suivez les lignes directrices générales sur le design.

Lignes directrices sur l'accessibilité

Date de modification :