Dialog
La modale de confirmation. Par défaut l'élément dialog natif, au-dessus de toute la page : voile, touche Échap, piège de focus et passage au premier plan viennent du navigateur. En mode contenu, elle reste dans son conteneur, comme l'écran d'un proto.
Utilisation
import { Dialog } from "@monstera/ui"Validation
La modale s'ouvre par-dessus toute la page : il faut donc la déclencher pour la voir. Échap ne la ferme pas toute seule, elle repasse par onClose, et c'est la page qui remet open à false.
Danger
Le ton ne touche qu'au bouton de confirmation, qui passe en rouge. Le pied de page fait toujours deux boutons de largeur égale, quel que soit le libellé.
Mode contenu
Dans un écran, comme le cadre des protos : la modale et son voile y restent, et sa largeur se borne à celle de l'écran. Le focus s'ouvre ici sur « Continuer », l'action qui ne détruit rien.
Le mode contenu
contained pose la modale sur l'Overlay du kit, en position fixe : elle reste dans le premier ancêtre qui retient les éléments fixes (un transform, un filter, contain: layout), voile compris, et sa largeur se borne à celle de cet ancêtre. Sans un tel ancêtre, elle couvre la fenêtre comme le rendu natif.
Le rendu natif passe par showModal, qui place la modale au premier plan de la page. Ce premier plan ignore le transform et l'overflow des ancêtres : dans le cadre de téléphone d'un proto, la modale en sortirait pour se centrer sur la fenêtre, et son voile couvrirait toute la page.
Accessibilité
Dans les deux rendus :
- la modale porte le nom de son
title, rendu en titre de niveau 2 ; - à l'ouverture, le focus va sur le bouton que désigne
initialFocus: l'annulation par défaut, la confirmation quand c'est l'annulation qui efface ; - Échap appelle
onClosesans fermer la modale : c'est la page qui remetopenàfalse.
En mode contenu, Tab et Maj+Tab bouclent dans la modale, et le focus revient au déclencheur à la fermeture, comme pour la Sheet. Le reste de la page n'est pas rendu inerte : le panneau d'un proto reste utilisable.
API
Prop
Type