Dialog
Boîte modale native (`<dialog>`)
ATELIER INTERACTIF
Essayez Dialog
Modifiez les propriétés. L’aperçu et le code sont rendus par Symfony et utilisent les mêmes props Twig.
APERÇU SERVEUR / TWIG RÉEL
Code Twig utilisable
<twig:ui:Dialog id="demo-dialog" title="Confirmer l’envoi" description="La mission sera transmise." trigger="Ouvrir le dialogue">
<p>Exemple de contenu de dialogue.</p>
</twig:ui:Dialog>Exemples
Dialogue simple
<twig:ui:Dialog id="confirm" title="Confirmer l’envoi" trigger="Ouvrir">
<p>Cette action est définitive.</p>
</twig:ui:Dialog>Confirmation destructive
<twig:ui:ConfirmDialog id="supprimer" title="Supprimer la mission" message="Cette action est définitive." trigger="Supprimer" confirmLabel="Supprimer" cancelLabel="Annuler" />Props
| Prop | Défaut | Rôle |
|---|---|---|
id | requis | Identifiant du dialogue |
title | requis | Titre |
trigger | null | Libellé du bouton d'ouverture rendu avec le dialogue |
description | null | Texte secondaire sous le titre |
closeLabel | Fermer | Nom accessible du bouton de fermeture |
Accessibilité
- Le dialogue natif capture le focus et le rend a l'element declencheur a la fermeture.
- Le bouton de fermeture porte aria-label avec la prop closeLabel (défaut « Fermer »), surchargeable par l'application.
- Le titre est un h2 ; adapter le niveau si la page en contient deja.