Sheet
La surface superposée : feuille qui monte du bas, ou modale qui grandit sur place. Elle se pose au-dessus d'un Overlay, qui lui fournit le voile.
Utilisation
import { Sheet } from "@monstera/ui"Feuille du bas : coins arrondis en haut, poignée de glisser.
Confirmation
Modale centrée : tous les coins arrondis, titre et bouton fermer.
Sheet et modal
La feuille s'arrondit en haut seulement et affiche une poignée, la modale s'arrondit partout. Un titre remplace la poignée par un entête, et un onClose y ajoute la croix.
Fond main
Le fond plein, par défaut.
Fond gradient
Un halo cyan-menthe flouté en haut.
Fonds
Le dégradé est un halo cyan-menthe flouté en haut de la surface. Il repeint aussi le bouton fermer, qui passe du gris au navy pour tenir sur le halo.
Ouverture réelle
Les aperçus ci-dessus sont montés en permanence et ne jouent leur entrée qu'au chargement. Ici la feuille monte et redescend pour de bon, portée par un Overlay aligné en bas.
Accessibilité
Posée sur un Overlay, la feuille est modale :
- elle porte le nom de son
title, rendu en titre de niveau 2. Sanstitle, passeraria-label, ouaria-labelledbyvers le titre placé dans le contenu : le type l'exige ; title=""garde l'entête et sa croix sans afficher de titre : nommer alors la feuille pararia-labelledbyouaria-label;- à l'ouverture, le focus entre dans la feuille, sur son premier élément focalisable ;
- Tab et Maj+Tab bouclent dans la feuille ;
- Échap appelle
onClose; - à la fermeture, le focus revient sur l'élément qui avait ouvert la feuille.
Montée dans le flux de la page, comme dans les deux premiers aperçus, elle ne prend pas le focus et n'est pas annoncée comme modale.
À la charge de l'intégrateur : fournir onClose, sans quoi Échap ne fait rien, et garder une sortie dans le contenu d'une feuille sans croix.
API
Prop
Type
Overlay
Le voile seul : un fond assombri et flouté sur tout l'écran, qui isole ce qu'on lui confie. Il ne dessine aucun panneau, c'est le rôle de Sheet.
Toast
La pilule de confirmation, large de 328 px. Le composant est l'apparence seule : le minuteur, le portail et la position en bas d'écran restent à la charge de l'application.