Tab group - Groupe d'onglets

Élément permettant à l'utilisateur de naviguer entre plusieurs sections de contenu au sein d'une même page.

Anatomie

Le composant onglet est composé de plusieurs éléments de trois éléments visibles.

tab anatomie
  1. Libellé
  2. Indicateur (lors de l'état actif)
  3. Icône de fermeture (lors d'un état refermable)

 

États

Les onglets sont utilisés à l'intérieur des groupes d'onglets. Ils sont représentés sous 4 états :

Défaut - Default

défault

 

Activé - Active

Active

 

Au survol - Hover

hover

 

Désactivé - Disabled

disabled

 

Variantes

Onglet refermable

Un onglet est dit refermable lorsque celui-ci présente une croix de fermeture. Au clic sur celle-ci, l'onglet est supprimé.

L'onglet refermable peut être utilisé lorsque l'utilisateur à le contrôle sur l'affichage d'un ensemble de contenu à l'aide d'aide bouton ou d'un lien.

 

Groupe d'onglets

Les groupes d'onglets organisent le contenu dans un conteneur. La section affichée correspond à l'onglet actif.

 

Responsive

Si le nombre d'onglets dépasse la largeur du conteneur, des flèches de défilement apparaissent pour permettre de faire défiler et révéler les onglets masqués.

 

Alternatives