TabBar
La barre d'onglets basse, navigation principale de l'application. Un onglet actif parmi quatre inactifs, et c'est l'appelant qui décide lequel.
Utilisation
import { TabBar } from "@monstera/ui"Cinq onglets
Actif et inactif diffèrent par la graisse et la couleur, posées une seule fois sur le bouton et héritées par l'icône et le libellé. Cliquer un onglet appelle onSelect, la barre ne retient rien.
Un nom qui s'écarte de Figma
Le calque Figma s'appelle « menu ». Le kit dit TabBar, parce que Menu est déjà l'alias de DropdownMenu. À ne pas confondre non plus avec NavList et NavItem, qui sont la navigation latérale.
L'icône hérite
Chaque onglet reçoit son icône en ReactNode. Une Icon du kit prend currentColor et suit donc l'état de l'onglet sans variante : c'est la convention de toute la bibliothèque.
Accessibilité
La barre est un repère de navigation nommé (label, « Navigation principale » par défaut), et l'entrée courante porte aria-current="page". Ce ne sont pas des onglets au sens ARIA : la barre change d'écran, elle ne dévoile pas un panneau dans la page, et un tablist sans tabpanel promettrait au lecteur d'écran ce qui n'existe pas. Les libellés grandissent avec le texte jusqu'à 16 px.
API
Prop
Type