LgModal

LgModal affiche un contenu dans une fenêtre modale : titre avec icône, corps (ChildContent), pied de page (FooterContent) et barre d'outils optionnelle. La fenêtre est déplaçable, se ferme par la croix ou par programme, et demande confirmation si un formulaire suivi (LgFormTracker) contient des modifications non enregistrées.

<LgModal Title="#EditOrder" @bind-Visible="_modalVisible">
    ...
</LgModal>

• Espace de noms : Lagoon.UI.Components
• Hérite de : LgAriaComponentBase → LgComponentBase
• Interfaces : IPageTitleHandler, IFormTrackerHandler, ICommandListener
• Package NuGet : Lagoon.UI

Infrastructure

Le rendu des modales s'appuie sur LgModalContainer, un composant d'infrastructure enregistré par le layout de l'application — vous n'avez pas à le déclarer.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Ouvrir et fermer une modale

Pilotez l'affichage avec Visible (liaison bidirectionnelle @bind-Visible) ou avec les méthodes ShowAsync() / CloseAsync() via @ref. CloseAsync() respecte la confirmation de fermeture ; la croix de l'en-tête suit le même chemin.

OrderPage.razor

<LgButton Text="#EditOrder" OnClick="OpenModalAsync" />

<LgModal Title="#EditOrder"
         IconName="@IconNames.All.Pencil"
         @bind-Visible="_modalVisible">
    <ChildContent>
        <LgTextBox Label="#Reference" @bind-Value="_model.Reference" />
    </ChildContent>
    <FooterContent>
        <LgButton Text="#Save" OnClick="SaveAsync" />
    </FooterContent>
</LgModal>

OrderPage.razor.cs

public partial class OrderPage : LgPage
{
    // Visibilité de la modale : liée avec @bind-Visible pour suivre aussi la fermeture par la croix.
    private bool _modalVisible;

    private readonly OrderVm _model = new();

    // Ouvre la modale d'édition.
    private Task OpenModalAsync(ActionEventArgs args)
    {
        _modalVisible = true;
        return Task.CompletedTask;
    }

    // Persiste la saisie puis ferme la modale.
    private async Task SaveAsync(ActionEventArgs args)
    {
        await Task.Delay(100, args.CancellationToken);
        _modalVisible = false;
        ShowSuccess("#OrderSaved");
    }

    private sealed class OrderVm
    {
        public string Reference { get; set; }
    }
}

Contrôler la fermeture

OnClose est déclenché avant la fermeture : positionnez args.Cancel pour la refuser (saisie incomplète, traitement en cours…). Closable="false" masque la croix de fermeture et BackgroundClose autorise la fermeture par un clic sur l'arrière-plan.

WizardPage.razor

<LgModal Title="#WizardStep"
         Closable="true"
         BackgroundClose="false"
         OnClose="OnModalClosing"
         @bind-Visible="_modalVisible">
    ...
</LgModal>

WizardPage.razor.cs

public partial class WizardPage : LgPage
{
    private bool _modalVisible;

    // Indique qu'un traitement est en cours et que la fermeture doit être bloquée.
    private bool _isProcessing;

    // Déclenché avant fermeture : positionnez args.Cancel pour empêcher la fermeture.
    private void OnModalClosing(CloseModalEventArgs args)
    {
        if (_isProcessing)
        {
            args.Cancel = true;
            ShowWarning("#ProcessingInProgress");
        }
    }
}

Taille, position et déplacement

ModalSize fixe la largeur, Centered centre verticalement la fenêtre et Draggable (activé par défaut) permet de la déplacer ; une icône de l'en-tête bascule entre déplacement contraint à la fenêtre et déplacement libre.

PreviewPage.razor

<LgModal Title="#Preview"
         ModalSize="ModalSize.ExtraLarge"
         Centered="true"
         Draggable="false"
         @bind-Visible="_modalVisible">
    ...
</LgModal>

PreviewPage.razor.cs

public partial class PreviewPage : LgPage
{
    private bool _modalVisible;
}

Barre d'outils et description

Toolbar insère une barre d'outils dans l'en-tête et Summary ajoute une description sous le titre. La modale écoute aussi les commandes remontées par ses enfants : la commande CloseModal la ferme.

DocumentPage.razor

<LgModal Title="#Document" Summary="#DocumentModalSummary" @bind-Visible="_modalVisible">
    <Toolbar>
        <LgToolbar>
            <LgToolbarButton Text="#Print" IconName="@IconNames.All.Printer" CommandName="print" />
        </LgToolbar>
    </Toolbar>
    <ChildContent>
        ...
    </ChildContent>
</LgModal>

DocumentPage.razor.cs

public partial class DocumentPage : LgPage
{
    private bool _modalVisible;
}

Afficher une page dans une modale

LgModal implémente IPageTitleHandler : une LgPage affichée dans la modale lui transmet automatiquement son titre, son icône et sa classe CSS si Title / IconName ne sont pas définis sur la modale.

Propriétés

Toutes les propriétés [Parameter] du composant, y compris celles héritées.

Nom	Type	Défaut	Déclaré dans	Description
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgModal	Attributs HTML additionnels appliqués à l'élément rendu.
BackgroundClose	bool?	null	LgModal	Autorise la fermeture par clic sur l'arrière-plan.
Centered	bool	false	LgModal	Centre verticalement la fenêtre.
ChildContent	RenderFragment	null	LgModal	Contenu du corps de la modale.
Closable	bool	true	LgModal	Affiche la croix de fermeture.
CssClass	string	null	LgModal	Classes CSS additionnelles.
DefaultVisible	bool?	null	LgModal	Visibilité initiale de la modale (appliquée à l'initialisation).
Draggable	bool	true	LgModal	Permet de déplacer la fenêtre.
FooterContent	RenderFragment	null	LgModal	Contenu du pied de page (boutons d'action).
IconName	string	null	LgModal	Icône de l'en-tête. Si null, l'icône de la LgPage affichée est utilisée.
ModalSize	ModalSize	Medium	LgModal	Taille (largeur) de la fenêtre.
OnClose	EventCallback<CloseModalEventArgs>	—	LgModal	Callback appelé avant la fermeture ; args.Cancel = true la refuse.
Summary	string	null	LgModal	Description affichée sous le titre.
Title	string	null	LgModal	Titre de la modale. Si null, le titre de la LgPage affichée est utilisé.
Toolbar	RenderFragment	null	LgModal	Barre d'outils affichée dans l'en-tête.
Visible	bool	true	LgModal	Affiche ou masque la modale (@bind-Visible).
VisibleChanged	EventCallback<bool>	—	LgModal	Callback de mise à jour de Visible.
AriaLabel	string	null	LgAriaComponentBase	Valeur de l'attribut aria-label.
AriaLabelledBy	string	(id de l'en-tête)	LgAriaComponentBase	Valeur de l'attribut aria-labelledby. Par défaut, la modale est reliée à son en-tête.

Paramètres en cascade

LgModal consomme aussi des paramètres fournis automatiquement par des composants ancêtres : FormTracker (LgFormTracker), le gestionnaire de commandes parent (ICommandListener) et le gestionnaire de suivi de formulaires parent (IFormTrackerHandler).

Méthodes & événements

Membre	Signature	Description
ShowAsync	Task ShowAsync()	Affiche la modale.
CloseAsync	Task CloseAsync()	Demande la fermeture : confirmation si un formulaire suivi a des modifications, puis OnClose.
OnClose	EventCallback<CloseModalEventArgs>	Avant la fermeture ; args.Cancel = true la refuse.
VisibleChanged	EventCallback<bool>	À chaque changement de visibilité (@bind-Visible).

Énumérations associées

ModalSize

Largeur de la fenêtre modale.

Valeur	Description
Small	300 px.
Medium	500 px (valeur par défaut).
Large	800 px.
ExtraLarge	1140 px.
ExtraExtraLarge	1600 px.

Bonnes pratiques / accessibilité

• La modale est automatiquement reliée à son en-tête par aria-labelledby : donnez-lui toujours un Title (ou un AriaLabel) explicite.
• Placez les actions de validation dans FooterContent et gardez le corps pour la saisie ; la commande CloseModal permet à un bouton enfant de fermer la modale sans référence directe.
• Voir la page Accessibilité pour les règles RGAA appliquées par le framework (focus, rôles, navigation clavier).

Référence complète

Tous les paramètres (hérités compris) : Référence API — LgModal.

Composants liés

• LgSummaryBox — champ texte long édité dans une modale.
• LgEditForm — formulaire dont le suivi de modifications déclenche la confirmation de fermeture.