Tabs
La barre d'onglets qui découpe une même page en vues. Tabs pose la barre et son filet, TabsItem chaque onglet.
Utilisation
import { Tabs, TabsItem, TabsPanel } from "@monstera/ui"Contenu de l’onglet « Aperçu ».
Barre d'onglets
L'onglet courant porte active : il passe en gras et pose son trait sous le libellé. Rien n'est mémorisé par le composant, c'est l'appelant qui tient l'onglet sélectionné.
Débordement
La barre occupe toute la largeur disponible et fait défiler ses onglets à l'horizontale quand ils ne tiennent plus. Aucun onglet n'est tronqué ni replié.
Accessibilité
Un seul onglet est dans l'ordre de tabulation, l'actif. Les flèches gauche et droite passent d'un onglet à l'autre en bouclant, Début et Fin vont aux bouts ; Entrée ou Espace active. L'activation est manuelle : un onglet peut coûter cher à ouvrir, ou changer d'écran.
Le contenu commandé se pose dans un TabsPanel : l'onglet le vise par controls, le panneau prend le nom de l'onglet actif par labelledBy, et il entre dans l'ordre de tabulation pour que le clavier atteigne son contenu en un pas. Tabs accepte un aria-label qui nomme le jeu d'onglets.
API
Tabs
Prop
Type
TabsItem
Prop
Type
TabsPanel
Prop
Type