Tabs
Composant de navigation segmenté pour basculer entre les vues associées.
Basculer entre les vues associéesLien vers la section
Les Onglets Le composant permet aux utilisateurs de basculer entre les vues associées sans quitter la page.
Utilisez-le pour:
- sections de paramètres
- Vues tableau de bord
- sections de facturation
- panneaux de produits
- filtres compacts
- contenu segmenté
- Vues d'administration associées
Les onglets sont construits sur Onglets Radix et stylisé avec des tokens PyColors pour un thème cohérent, des états de focus et un comportement d'interaction.
Idée de base
Les onglets sont pour les vues par les pairs au même niveau hiérarchique. Ils ne doivent pas remplacer la navigation primaire.
ImportationLien vers la section
import { Tabs } from "@pycolors/ui";Utilisation de baseLien vers la section
Utilisez les onglets lorsque plusieurs vues connexes appartiennent au même contexte de page.
Contenu des paramètres du compte
Quand utiliser les ongletsLien vers la section
Utilisez les onglets lorsque les utilisateurs passent d’une section à l’autre dans le même flux de travail.
Sections des paramètres
Vues tableau de bord
Filtres compacts
TaillesLien vers la section
TabsList et TabsTrigger Accepter un size prop pour adapter la densité.
Contenu des petits onglets
Contenu des onglets moyens
Contenu des grands onglets
Tailles disponiblesLien vers la section
| Taille | Objet |
|---|---|
sm | Interfaces utilisateur denses, filtres, barres d'outils |
md | Densité par défaut |
lg | Espacement confortable, onboarding, surfaces marketing |
Règle de densité
Utilisation sm pour les commandes de produits compacts, md pour la plupart
des UI de produit, et lg uniquement lorsque les onglets ont besoin d'une
présence visuelle plus forte.
Exemples de produitsLien vers la section
Paramètres des onglets
Use tabs to separate stable configuration areas inside settings surfaces.
UtilisationsLien vers la section
Utiliser des onglets pour les vues par les pairs
Chaque onglet doit représenter une vue connexe au même niveau hiérarchique.
Gardez les étiquettes courtes
Préférez les étiquettes comme Vue d'ensemble, Activité, Facturation, Sécurité, Journaux, Utilisation.
Limiter le nombre d'onglets
Deux à cinq onglets fonctionnent généralement mieux. Plus que cela devient souvent la navigation.
Gardez les actions importantes visibles
Ne masquez pas les actions critiques dans un onglet si les utilisateurs en ont besoin globalement.
Conserver la structure de contenu
Chaque panneau de tabulation doit avoir une structure de titre ou de section claire lorsque le contenu est complexe.
Tabs vs navigation vs filtresLien vers la section
| Situation | Utilisation |
|---|---|
| Basculer entre les vues des pairs | Onglets |
| Déplacer entre les pages ou les principaux domaines de produits | Navigation |
| Basculer un petit filtre d'état | Tabs ou contrôle segmenté |
| Sélectionner une valeur dans un formulaire | Groupe de radio |
| Masquer ou révéler du contenu facultatif | Accordéon |
| Basculer entre des flux de travail non liés | Navigation des pages |
Règle de décision
Si chaque option est une vue associée dans la même page, utilisez les onglets. Si chaque option est une destination, utilisez la navigation.
APILien vers la section
Composante
| Composante | Désignation |
|---|---|
Tabs | Récipient racine |
TabsList | Trigger list, soutiens size |
TabsTrigger | Déclencheur à onglet individuel, supports size |
TabsContent | Panneau de contenu |
Props
| Composante | Props |
|---|---|
Tabs | Étend Radix TabsPrimitive.TabsProps |
TabsList | Étend Radix TabsPrimitive.TabsListProps + { size?: TabsSize } |
TabsTrigger | Étend Radix TabsPrimitive.TabsTriggerProps + { size?: TabsSize } |
TabsContent | Étend Radix TabsPrimitive.TabsContentProps |
TypeScript typesLien vers la section
export type TabsSize = "sm" | "md" | "lg";AccessibilitéLien vers la section
Les onglets sont construits sur les primitives Radix Tabs.
Directives :
- fournir un
aria-labelleTabsListou l'associer à un titre visible - Garder chaque
TabsTriggerclaire et textuelle lorsque cela est possible - éviter que l'onglet icon-only se déclenche à moins qu'ils n'aient des étiquettes accessibles
- Gardez la navigation du clavier prévisible
- s'assurer que le contenu des onglets est significatif lorsqu'il est atteint directement
- éviter de cacher les actions critiques du produit derrière des onglets inactifs
Radix fournit le support du clavier:
- Les touches fléchées se déplacent entre les déclencheurs
- Enter ou Space active un déclencheur en fonction du mode d'activation
- focus management suit la sémantique des tablists
Règle d'accessibilité
Une étiquette de tabulation doit décrire clairement le contenu qu'elle révèle.
Préférez/évitezLien vers la section
Préférez
- 2-5 vues par les pairs
- étiquettes courtes
aria-labelsur la liste- Mise en page de contenu stable lorsque cela est possible
- actions au niveau de la page en dehors des onglets
Éviter
- trop d'onglets
- workflows non liés dans une tablist
- onglets icon-only sans étiquettes
- Masquer les actions critiques dans les onglets
- Utilisation des onglets comme navigation globale
Directives de copie du produitLien vers la section
Les étiquettes doivent être courtes et familières.
- Vue d’ensemble
- Activité
- Facturation
- Sécurité
- Journaux