Composant · Navigation

Tabs

Stable

Onglets pour basculer entre plusieurs vues d'un même contexte sans quitter la page. Implémente le motif ARIA tablist / tab / tabpanel ; un onglet peut être désactivé.

Quand l'utiliser

Organiser un contenu apparenté en sections alternatives (aperçu, membres, paramètres).
Quand une seule section est utile à la fois et que l'utilisateur reste dans le même objet.
Pour une navigation entre pages distinctes, utilisez plutôt des liens.

Exemple interactif

Le dernier onglet est désactivé. onchange remonte la valeur sélectionnée.

Sections du projet

Vue d'ensemble du projet : statut, métriques clés et activité récente.

Voir le code (Svelte)

<Tabs
  items={[{"value":"overview","label":"Aperçu","content":"Vue d'ensemble du projet : statut, métriques clés et activité récente."},{"value":"members","label":"Membres","content":"Liste des membres et de leurs rôles."},{"value":"settings","label":"Paramètres","content":"Réglages du projet et intégrations."},{"value":"billing","label":"Facturation","content":"Indisponible sur ce plan.","disabled":true}]}
  label="Sections du projet"
/>

La sélection est interactive dans les trois moteurs ; onchange (Svelte) / onChange (React) / @change (Vue) remonterait la valeur dans une intégration réelle.

Onglet actif initial

activeValue fixe l'onglet sélectionné au montage.

Avec onglet initial

Réglages du projet et intégrations.

Voir le code (Svelte)

<Tabs
  items={[{"value":"overview","label":"Aperçu","content":"Vue d'ensemble du projet : statut, métriques clés et activité récente."},{"value":"members","label":"Membres","content":"Liste des membres et de leurs rôles."},{"value":"settings","label":"Paramètres","content":"Réglages du projet et intégrations."},{"value":"billing","label":"Facturation","content":"Indisponible sur ce plan.","disabled":true}]}
  activeValue="settings"
  label="Avec onglet initial"
/>

Anatomie

Liste d'onglets (.st-tabs__list, role="tablist") : les boutons d'onglet.
Onglet (.st-tabs__tab, role="tab") : indicateur d'état actif (filet haut ou bas selon le thème).
Panneau (.st-tabs__panel, role="tabpanel") : le contenu de l'onglet courant.

Accessibilité

Motif tablist/tab/tabpanel : aria-selected suit l'onglet actif.
La liste reçoit un aria-label via la prop label.
Le focus clavier est visible sur chaque onglet (outline thémé).
Un onglet désactivé (disabled) n'est pas activable et est ignoré par la sélection par défaut.

Lignes directrices

À faire

Des libellés courts d'un ou deux mots.
Garder un nombre d'onglets raisonnable (≤ 6).

À éviter

Cacher une étape obligatoire d'un flux dans un onglet.
Utiliser des onglets pour naviguer vers d'autres pages.

API

Prop	Type	Défaut	Description
`items`	`TabItem[]`	requis	Onglets à rendre.
`activeValue`	`string`	1er actif	Valeur de l'onglet initialement actif.
`label`	`string`	`"Tabs"`	aria-label de la tablist.
`onchange`	`(value: string) => void`	optionnel	Appelé au changement d'onglet.
`class`	`string`	optionnel	Classe(s) supplémentaire(s).

Type TabItem

Champ	Type	Description
`value`	`string`	Identifiant unique de l'onglet.
`label`	`string`	Libellé affiché sur l'onglet.
`content`	`string`	Contenu du panneau (texte).
`disabled`	`boolean?`	Désactive l'onglet.

Tokens utilisés

--st-component-tabs-indicator
--st-component-tabs-activeText
--st-component-tabs-inactiveText
--st-component-tabs-inactiveBackground
--st-component-tabs-border
--st-component-tabs-panelBackground
--st-component-tabs-anatomy-focus-outline