LgFrame

LgFrame est le conteneur standard de Lagoon pour regrouper un en-tête, un corps, un résumé et un pied de page. Il peut aussi embarquer une toolbar et devenir repliable pour masquer temporairement son contenu.

<LgFrame Title="Résumé">
    Contenu principal
</LgFrame>

• Espace de noms : Lagoon.UI.Components
• Hérite de : LgAriaComponentBase → LgComponentBase
• Package NuGet : Lagoon.UI

Résumé replié

SummaryContent n'est rendu que si le frame est Collapsable et actuellement replié. Utilisez-le pour afficher un état synthétique lorsque le contenu principal est masqué.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Frame simple ou sans en-tête

Si le frame ne contient qu'un corps, ChildContent est implicite. Omettez Title pour un en-tête vide, ou utilisez ShowHeader="false" pour masquer toute la zone d'en-tête.

SimpleFramePage.razor

@inherits LgPage

<LgFrame Title="#OrderFrameTitle"
         IconName="@IconNames.All.InfoCircle"
         Kind="Kind.Primary">
    <p>@("#OrderFrameContent".Translate())</p>
</LgFrame>

<LgFrame ShowHeader="false"
         ChildCssClass="p-3"
         CssClass="mt-3">
    <p>@("#NoHeaderFrameContent".Translate())</p>
</LgFrame>

Frame repliable avec résumé, toolbar et footer

Collapsed supporte le binding bidirectionnel. DefaultCollapsed initialise l'état au premier rendu ; ensuite, conservez l'état avec @bind-Collapsed et réagissez via OnToggle.

OrderSummaryPage.razor

@inherits LgPage

<LgFrame Kind="Kind.Info"
         IconName="@IconNames.All.InfoCircle"
         ButtonSize="ButtonSize.Small"
         Collapsable="true"
         DefaultCollapsed="true"
         @bind-Collapsed="_isCollapsed"
         OnToggle="OnFrameToggleAsync"
         OnCommand="OnFrameCommandAsync"
         HeaderCssClass="order-frame-header"
         ChildCssClass="order-frame-body">
    <TitleContent>
        <LgTitle Text="#OrderSummaryTitle" Level="2" />
    </TitleContent>
    <Toolbar>
        <LgToolbarButton Text="#ExportOrder"
                         IconName="@IconNames.All.Pdf"
                         CommandName="export-order" />
    </Toolbar>
    <HeaderContent>
        <span>@("#OrderNumberLabel".Translate()) @_orderNumber</span>
    </HeaderContent>
    <ChildContent>
        <p>@("#OrderAmountLabel".Translate()) @_totalAmount</p>
        <p>@("#FrameLastEvent".Translate()) @(_lastFrameEventKey.Translate())</p>
    </ChildContent>
    <SummaryContent>
        <p>@("#OrderCollapsedSummary".Translate()) @_orderNumber</p>
    </SummaryContent>
    <FooterContent>
        <p>@("#OrderUpdatedAt".Translate()) @_lastRefreshLabel</p>
    </FooterContent>
</LgFrame>

OrderSummaryPage.razor.cs

public partial class OrderSummaryPage : LgPage
{
    // Mémorise l'état replié pour restaurer l'affichage choisi par l'utilisateur.
    private bool _isCollapsed = true;

    // Donnée métier affichée dans l'en-tête et dans le résumé replié.
    private string _orderNumber = "CMD-2024-0042";

    // Montant de démonstration rendu dans le corps du frame.
    private decimal _totalAmount = 1245.50m;

    // Libellé issu du modèle métier, affiché dans le footer.
    private string _lastRefreshLabel = "2024-06-18";

    // Clé de traduction du dernier état observé, utile pour tracer le repli/dépli.
    private string _lastFrameEventKey = "#FrameStartsCollapsed";

    // Déclenché au repli/dépli : persistez ici l'état utilisateur ou chargez le contenu à la demande.
    private Task OnFrameToggleAsync(ToggleFrameEventArgs args)
    {
        _isCollapsed = args.Collapsed;
        _lastFrameEventKey = args.Collapsed ? "#FrameCollapsed" : "#FrameExpanded";
        return Task.CompletedTask;
    }

    // Reçoit les commandes émises par la toolbar : centralisez ici les actions du frame.
    private Task OnFrameCommandAsync(CommandEventArgs args)
    {
        if (args.CommandName == "export-order")
        {
            _lastFrameEventKey = "#FrameExportRequested";
            args.Handled = true;
        }

        return Task.CompletedTask;
    }
}

Points d'attention

• SummaryContent est rendu uniquement si Collapsable="true" et si le frame est replié.
• Un clic dans l'en-tête replie ou déplie un frame Collapsable, sauf s'il est fait dans un champ (input, textarea, select, option) placé dans l'en-tête (TitleContent, HeaderContent ou Toolbar), ou sur un élément qui arrête la propagation du clic (boutons de la Toolbar, LgButton par défaut, libellés de LgCheckBox, LgToggle et LgRadio). Un <label> HTML écrit à la main dans l'en-tête replie le frame au lieu d'activer son champ : ajoutez-lui @onclick:stopPropagation.
• Toolbar est automatiquement encapsulé dans une LgToolbar ; ButtonSize pilote la taille des boutons de cette toolbar.
• Kind accepte les variantes visuelles Primary, Default, Secondary, Success, Error, Warning et Info.
• OnCommand récupère les commandes des composants enfants implémentant IActionComponent, comme LgToolbarButton.

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
ChildContent	RenderFragment	null	LgFrame	Contenu principal du frame.
FooterContent	RenderFragment	null	LgFrame	Contenu du pied de page, rendu sous le corps du frame.
HeaderContent	RenderFragment	null	LgFrame	Contenu libre ajouté dans l'en-tête, après le titre et l'icône.
SummaryContent	RenderFragment	null	LgFrame	Contenu affiché à la place du corps lorsque le frame est replié.
TitleContent	RenderFragment	null	LgFrame	Titre personnalisé en markup, rendu dans la zone de titre.
Toolbar	RenderFragment	null	LgFrame	Barre d'outils rendue dans l'en-tête via LgToolbar.
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgFrame	Attributs HTML additionnels appliqués à l'élément racine.
ButtonSize	ButtonSize?	null	LgFrame	Taille des boutons de la toolbar. Si non défini, la configuration App.BehaviorConfiguration.FrameToolbarButtonSize est utilisée.
ChildCssClass	string	null	LgFrame	Classes CSS appliquées à la zone de contenu principale.
Collapsable	bool	false	LgFrame	Autorise le repli/dépli du frame via l'en-tête.
Collapsed	bool	false	LgFrame	État replié courant.
CollapsedChanged	EventCallback<bool>	—	LgFrame	Callback de two-way binding pour Collapsed.
CssClass	string	null	LgFrame	Classes CSS additionnelles appliquées au frame.
DefaultCollapsed	bool?	null	LgFrame	État initial appliqué à Collapsed lors de l'initialisation si la valeur est fournie.
HeaderCssClass	string	null	LgFrame	Classes CSS ajoutées à l'en-tête.
IconName	string	null	LgFrame	Icône affichée devant le titre du frame.
Kind	Kind	Kind.Primary	LgFrame	Thème visuel du frame.
OnCommand	EventCallback<CommandEventArgs>	—	LgFrame	Réception des commandes bubbled par les composants enfants implémentant IActionComponent.
OnToggle	EventCallback<ToggleFrameEventArgs>	—	LgFrame	Callback déclenché lors d'une action de repli/dépli.
ShowHeader	bool	true	LgFrame	Masque complètement l'en-tête si false.
Title	string	null	LgFrame	Titre texte du frame.
AriaLabel	string	null	LgAriaComponentBase	Valeur de l'attribut aria-label appliqué au titre rendu.
AriaLabelledBy	string	null	LgAriaComponentBase	Valeur de l'attribut aria-labelledby.

Événements

Événement	Type	Description
CollapsedChanged	EventCallback<bool>	Déclenché pour synchroniser un @bind-Collapsed.
OnCommand	EventCallback<CommandEventArgs>	Reçoit les commandes propagées par les composants enfants (par exemple une LgToolbarButton).
OnToggle	EventCallback<ToggleFrameEventArgs>	Déclenché lorsqu'un utilisateur replie ou déplie le frame.

Énumérations associées

ButtonSize

ButtonSize contrôle la propriété ButtonSize, utilisée pour dimensionner les boutons de la toolbar.

Valeur	Description
Medium	Taille standard.
Small	Taille réduite (valeur par défaut de la configuration Lagoon standard lorsque ButtonSize reste null).
Large	Grande taille.

Kind

Kind contrôle le thème visuel de la propriété Kind du frame.

Valeur	Description
Primary	Style principal (valeur par défaut).
Default	Style par défaut.
Secondary	Style secondaire.
Success	Style « succès ».
Error	Style « erreur » (danger).
Warning	Style « avertissement ».
Info	Style « information ».

Composants liés

• LgFilterFrame — variante spécialisée pour les panneaux de filtres.
• LgAccordion — conteneur orchestrant plusieurs frames repliables.
• LgSplitContainer — disposition à deux panneaux dans laquelle un LgFrame s'intègre souvent.