Onglets standards

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="tab1-title" href="#tab1" role="tab" data-toggle="tab" aria-controls="tab1" >Onglet actif</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="tab2-title" href="#tab2" role="tab" data-toggle="tab" aria-controls="tab2">Onglet</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link disabled" tabindex="-1" aria-disabled="true">Onglet désactivé</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Onglet avec menu</a>
    <ul class="dropdown-menu" role="menu" aria-label="menu déroulant">
      <li role="presentation"><a class="dropdown-item" role="menu-item" href="#">Action</a></li>
      <li class="dropdown-divider"></li>
      <li role="presentation"><a class="dropdown-item" role="menu-item" href="#">Autre action</a></li>
    </ul>        
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade active show" id="tab1" role="tabpanel" aria-labelledby="tab1-title">
  ...
  </div>
  <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-title">
  ...
  </div>
</div>

Onglets boutons

Dans la zone de travail, les onglets peuvent aussi être présentés sous forme de boutons arrondis. Cette présentation peut être utile si la page possède déjà des onglets standards. Elle est également bien adapté pour créer des onglets verticaux.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.

<ul class="nav nav-pills" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-tab-title-1" data-toggle="pill" href="#pills-tab-1" role="tab" aria-controls="pills-tab-1" aria-selected="true">Bouton onglet 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-tab-title-2" data-toggle="pill" href="#pills-tab-2" role="tab" aria-controls="pills-tab-2" aria-selected="false">Bouton onglet 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" id="pills-tab-title-3" tabindex="-1" aria-disabled="true">Bouton onglet inactif</a>
  </li>
</ul>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="" data-toggle="pill" href="#" role="tab" aria-controls="" aria-selected="true">Bouton onglet 2</a>
      <a class="nav-link" id="" data-toggle="pill" href="#" role="tab" aria-controls="" aria-selected="false">Bouton onglet 2</a>
      <a class="nav-link disabled" id="" tabindex="-1" aria-disabled="true">Bouton onglet inactif</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="" role="tabpanel" aria-labelledby="">
        ...
      </div>
    </div>
  </div>  
</div>

Navigation par étapes

Ce composant très courant dans les applications CNAM permet de guider l'utilisateur à travers les différentes étapes d'un processus.

Le composant se place dans la zone de navigation de l'entête de la zone de travail. Il s'étend sur toute la largeur de la zone qu'il occuppe, la taille des étapes s'adaptent selon leur nombre. Il est conseillé de ne pas proposer plus de 5 à 7 étapes.

<ul class="etapes">
  <li class="active"><a href="#">Réception <br>de la demande</a></li>
  <li class="select"><a href="#">Instruction</a></li>
  <li>Validation des droits</li>
  <li>Validation de la demande</li>
  <li>Récapitulatif</li>  
</ul>

Onglets alternatifs

Ce composant d'onglets alternatifs permet d'enrichir les fonctionnalités des onglets en proposant :

  • 2 lignes de libellé pour exprimer des concepts complexes nécessitant un sous titre, afficher un statut ou une information contextuelle.
  • L'ajout optionnel d'un menu de navigation sur l'onglet. Il peut notamment servir de navigation intérieur dans le contenu de l'onglet.
  • La présence de boutons d'actions au niveau de l'entête de page. Cette structure est particulièrement utile lorsque tous les onglets n'ont pas vocation à être modifiés ou lorsque leur contenu est très long.

<ul class="nav nav-tabs nav-tabs-alt" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" href="#tab-alt-1" role="tab" data-toggle="tab" aria-controls="tab-alt-1" > 
      <span>ONGLETS 1</span>
      <span class="status">Sous titre de l'onglet</span>
    </a>
    </li>
  <li class="nav-item" role="presentation">
    <button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle" aria-label="Lien du menu déroulant"></button>
    <a class="nav-link" href="#tab-alt-2" role="tab" data-toggle="tab" aria-controls="#tab-alt-2" >
      <span>Autre onglet</span>
      <span class="status">Sous titre de l'onglet</span>
    </a>
    <ul class="dropdown-menu" role="menu" aria-label="menu déroulant">
      <li role="presentation"><a class="dropdown-item" role="menu-item" href="#">Action</a></li>
      <li class="dropdown-divider"></li>
      <li role="presentation"><a class="dropdown-item" role="menu-item" href="#">Autre action</a></li>
    </ul> 
  </li>         
  <li class="nav-item" role="presentation">
    <a class="nav-link disabled" tabindex="-1" aria-disabled="true">
      <span>Onglet désactivé</span>
      <span class="status">Sous titre de l'onglet</span>
    </a>
  </li>
  <li class="nav-item" role="presentation">
    <button href="#" class="btn btn-primary">Valider</button>
  </li>
</ul>

Mise en évidence d'onglet

Le framework propose plusieurs badges permettant de mettre en évidence le statut d'un onglet.

<ul class="nav nav-tabs">
  ...
  <li class="nav-item has-alert warning" role="presentation">
    <a class="nav-link" href="" role="tab" data-toggle="tab" aria-controls="">onglet avec alerte</a>
  </li>
  ...
</ul>
<li class="nav-item has-alert danger" role="presentation">...</li>
<li class="nav-item has-alert warning" role="presentation">...</li>
<li class="nav-item has-alert info" role="presentation">...</li>
<li class="nav-item has-alert success" role="presentation">...</li>
<li class="nav-item has-alert help" data-tooltip="" data-original-title="" role="presentation">...</li>
<ul class="nav nav-tabs nav-tabs-alt">
  <li class="nav-item has-alert danger" >...</li>
  <li class="nav-item has-alert warning" >...</li>
  <li class="nav-item has-alert info" >...</li>
  <li class="nav-item has-alert success" >...</li>
  <li class="nav-item has-alert help" >...</li>
</ul>