Comparaison comportementale
Contrôle segmenté vs Onglets
Choisir Contrôle segmenté pour : Basculer entre quelques modes d'affichage compacts. Choisir Onglets pour : Regrouper quelques vues de même niveau.
| Dimension | Contrôle segmentéSegmented control | OngletsTabs |
|---|---|---|
| Déclenchement | Clic ou toucher sur un segment compact. | Clic, toucher ou activation clavier d’un onglet ; les flèches circulent dans la liste. |
| Modalité | Contrôle exclusif non modal pour un changement immédiat de vue ou de filtre. | Navigation non modale entre des panneaux liés dans le même contexte. |
| Positionnement | Une courte ligne d’options adjacentes dans la vue concernée. | Une liste d’onglets directement adjacente au panneau contrôlé par l’onglet actif. |
| Interactivité | Un seul segment est actif et la sélection d’un autre met la vue à jour immédiatement. | Un onglet et son panneau sont actifs ; l’activation peut être automatique ou manuelle selon le coût de chargement. |
| Focus | Le groupe est un seul arrêt après sélection, avec un focus visible distinct de l'état sélectionné. | 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 : choisir un autre segment remplace la valeur sélectionnée. | Sans objet : sélectionner un autre onglet remplace le panneau visible sans fermer le composant. |
| Rôle accessible | radiogroup with radio options | tablist with tab and tabpanel |
| Cas d’usage | Basculer entre quelques modes d'affichage compacts | Regrouper quelques vues de même niveau |
| Comportement mobile | Le limiter à quelques options courtes ; passer aux onglets ou au select avant que les libellés débordent. | Garder les libellés lisibles dans une liste horizontale défilante ; éviter de répartir les onglets sur des lignes ambiguës. |