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
- Élément actif
- É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
- Élément actif
- Élément inactif
- 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.