La directive nuiDialog transforme un <dialog> natif en boîte de dialogue Needless UI. Le navigateur assure le comportement modal : la page en arrière-plan devient inerte, le focus reste à l’intérieur, Échap ferme la boîte de dialogue et le focus revient à l’élément qui l’a ouverte.
Liez [(open)] à un signal et donnez une valeur aux boutons de fermeture avec nuiDialogClose="…" pour savoir comment la boîte de dialogue a été fermée.
Confirmation
Une confirmation d’action destructrice. Le choix sans risque porte autofocus, et la valeur choisie arrive par (closed).
Formulaire dans une boîte de dialogue
Une boîte de dialogue peut contenir n’importe quel contenu. Ici, le premier champ reçoit le focus à l’ouverture.
Choix obligatoire
Avec [dismissible]="false", Échap et les clics sur le fond sont ignorés : l’utilisateur doit choisir une option.
Animations d’entrée
Chaque bouton ouvre la même boîte de dialogue avec un autre préréglage enter et le ressort bouncy. Quelle que soit son entrée en scène, elle disparaît dans un fondu rapide.