Navigation tabs

Les tabs (ou onglets) permettent d'organiser du contenu facilement en regroupant des informations similaires sur la même vue. Cela permet de visualiser le contenu sans avoir à quitter cette page.

Description

Les tabs (ou onglets) permettent d'organiser du contenu facilement en regroupant des informations similaires sur la même vue. Cela permet de visualiser le contenu sans avoir à quitter cette page.

Ce composant favorise la lisibilité et la hiérarchisation des informations, tout en évitant le défilement excessif.

Plateformes

Anatomie

  1. Élément actif
  2. Élément inactif

Usage

Quand l'utiliser ?

  • Lorsqu'il est nécessaire de comparer ou de trier des contenus similaires ou reliés (produits/services

  • Lorsqu'il est nécessaire de diviser/répartir des contenus par catégories pour rendre leur lecture plus digeste et la section plus compacte

  • Lorsqu'il est nécessaire de permettre à l'utilisateur de passer d'un affichage à l'autre, comme dans le cas d'une vue en carteet d'une vue en liste

Do's and don'ts

  • Do

    Une seule section peut-être affichée par défaut.

  • Don't

    Il est interdit de mélanger les styles des éléments du content switcher.

  • Do

    Il est obligatoire de rester consistant dans l'utilisation du style des éléments du content switcher.

  • Don't

    Il est interdit d'utiliser les tabs illustrées sans label 

Anatomie

  1. Élément actif
  2. Élément inactif
  3. Filtres (Optionnel) : Permet d'ouvrir le panel de filtres. Lorsqu'un ou plusieurs filtres sont actifs, une bulle s'affiche au dessus de l'icône.

Usage

Quand l'utiliser ?

  • Lorsqu'il est nécessaire de comparer ou de trier des contenus similaires ou reliés (produits/services

  • Lorsqu'il est nécessaire de diviser/répartir des contenus par catégories pour rendre leur lecture plus digeste et la section plus compacte

  • Lorsqu'il est nécessaire de permettre à l'utilisateur de passer d'un affichage à l'autre, comme dans le cas d'une vue en carteet d'une vue en liste

Do's and don'ts

  • Do

    Une seule section peut-être affichée par défaut.

  • Don't

    Une seule section peut-être affichée par défaut.

Des questions ou un feedback ?

N’hésitez pas à contacter la team Design System par mail.