Tabs
Onglets
Un ensemble de libellés qui bascule entre des panneaux de contenu liés en gardant un seul panneau visible à la fois.
Avec vos mots
Ce que les gens décrivent
Alias documentés : interface à onglets, barre d'onglets, panneaux à onglets
- basculer entre les panneaux aperçu et activité
- des libellés en haut qui changent le contenu
- afficher une vue liée à la fois
- une rangée d'onglets au-dessus d'un panneau
- changer de section sans quitter la page
- des flèches clavier entre les vues de contenu
Essayer
Changer de vue ou révéler du contenu
Comparer les trois comportements
Scénario comparatif partagé : Un espace projet révèle du contenu associé sur place tout en conservant la position de l'utilisateur dans la page.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Onglets
Tabs contrôle des panneaux de contenu ; Segmented control choisit une valeur, tandis qu'Accordion révèle des sections verticales sans remplacer un panneau commun.
Votre mission
Passer d'Aperçu à Fichiers avec les flèches et vérifier le panneau associé et le focus.
Cas limite à vérifier
Si un panneau charge sensiblement, l'activation devient manuelle afin que les flèches ne déclenchent pas des attentes répétées.
Mission
Onglets - Tabs
Passer d'Aperçu à Fichiers avec les flèches et vérifier le panneau associé et le focus.
Résumé du projet et prochaines échéances.
Parties du spécimen
Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.
Liste d'onglets
L'ensemble nommé qui regroupe les onglets disponibles.
À utiliser quand
- Regrouper quelques vues de même niveau
- Basculer instantanément entre des sections de réglages liées
À éviter quand
- Les panneaux doivent être comparés simultanément
- Chaque destination mérite sa propre URL et navigation de page
Comparer les concepts proches
Segmented control sélectionne une valeur ; Tabs sélectionne un panneau de contenu, tandis qu'Accordion développe ou replie des sections.
Contrôle segmentéAccordion révèle les sections sous leurs en-têtes ; Tabs remplace un panneau de même niveau, tandis que Segmented control choisit une valeur compacte.
AccordéonBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Activer un panneau
L'onglet sélectionné affiche son panneau associé tandis que les autres sont masqués.
Naviguer avec les flèches
Les flèches parcourent les éléments liés selon leur orientation visuelle.
États
Onglet Aperçu sélectionné
Onglet Aperçu sélectionné
Onglet Fichiers sélectionné
Onglet Fichiers sélectionné
Transitions d’état
Onglet Aperçu sélectionné → Onglet Fichiers sélectionné
La navigation par flèches atteint Fichiers et l’activation automatique ou explicite révèle son panneau.
Onglet Fichiers sélectionné → Onglet Aperçu sélectionné
La navigation par flèches atteint Aperçu et l’activation automatique ou explicite révèle son panneau.
Scénarios de test
- Contexte
- Une page projet regroupe Aperçu, Activité et Fichiers dans un espace local rapide.
- Mission
- Passer d'Aperçu à Fichiers avec les flèches et vérifier le panneau associé et le focus.
- État principal
- Un onglet sélectionné nomme le panneau visible, et les autres panneaux sont masqués de l'interaction.
- Cas limite
- Si un panneau charge sensiblement, l'activation devient manuelle afin que les flèches ne déclenchent pas des attentes répétées.
Accessibilité
- Role
- tablist with tab and tabpanel
- Nom accessible
- Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
- Focus
- La liste est un seul arrêt de tabulation ; le panneau visible est atteint dans l'ordre normal s'il contient des contrôles.
- Fermeture
- Sans objet : sélectionner un autre onglet remplace le panneau visible sans fermer le composant.
- Scroll
- Le changement de vue active conserve une position stable dans la page. Le focus reste sur le contrôle et le contenu révélé ne provoque pas de saut inattendu.
- Annonce
- L'état sélectionné et la relation entre chaque onglet et son panneau nommé sont exposés.
- Clavier
- Tab entre sur l'onglet sélectionné
- Les flèches parcourent les onglets
- Entrée ou Espace active en mode manuel
- Début et Fin atteignent le premier et le dernier
Bindings
Tabs.Root
- implementationKind
- radix
- nativeElement
- Non applicable
- ariaPattern
- tabs
- radixPrimitive
- Tabs
- shadcnRecipe
- Tabs
- runtimeDependency
- @radix-ui/react-tabs@1.1.17
- packageName
- @radix-ui/react-tabs
- exportName
- Tabs.Root
- exactVersion
- 1.1.17
- status
- verified
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : The application must choose manual or automatic activation according to panel latency and test the matching keyboard behavior.
Vérifier la source du binding
Sources
- WAI-ARIA APG: Tabs Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Tabs: tab, tablist, and tabpanel relationships plus activation and keyboard guidance.
- Radix Primitives: Tabs
Radix Primitives · documentation · 2026-07-16
Affirmation couverte : Tabs: documented Radix Tabs parts, controlled value, activation mode, and keyboard behavior.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.