LgFrame

LgFrame is Lagoon's standard container for grouping a header, body, summary, and footer. It can also embed a toolbar and become collapsible to temporarily hide its content.

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

• Namespace: Lagoon.UI.Components
• Inherits from: LgAriaComponentBase → LgComponentBase
• NuGet package: Lagoon.UI

Collapsed Summary

SummaryContent is rendered only if the frame is Collapsable and currently collapsed. Use it to display a summary state when the main content is hidden.

Usage

Demonstration

Try this component in the Lagoon showcase.

Simple frame or headerless frame

If the frame contains only a body, ChildContent is implicit. Omit Title for an empty header, or use ShowHeader="false" to hide the entire header area.

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>

Collapsible frame with summary, toolbar, and footer

Collapsed supports two-way binding. DefaultCollapsed initializes the state on first render; then, preserve the state with @bind-Collapsed and react 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
{
    // Retains the collapsed state to restore the display chosen by the user.
    private bool _isCollapsed = true;

    // Business data displayed in the header and in the collapsed summary.
    private string _orderNumber = "CMD-2024-0042";

    // Demo amount rendered in the frame body.
    private decimal _totalAmount = 1245.50m;

    // Label from the business model, displayed in the footer.
    private string _lastRefreshLabel = "2024-06-18";

    // Translation key of the last observed state, useful for tracking collapse/expand.
    private string _lastFrameEventKey = "#FrameStartsCollapsed";

    // Triggered on collapse/expand: persist the user state here or load content on demand.
    private Task OnFrameToggleAsync(ToggleFrameEventArgs args)
    {
        _isCollapsed = args.Collapsed;
        _lastFrameEventKey = args.Collapsed ? "#FrameCollapsed" : "#FrameExpanded";
        return Task.CompletedTask;
    }

    // Receives commands emitted by the toolbar: centralize frame actions here.
    private Task OnFrameCommandAsync(CommandEventArgs args)
    {
        if (args.CommandName == "export-order")
        {
            _lastFrameEventKey = "#FrameExportRequested";
            args.Handled = true;
        }

        return Task.CompletedTask;
    }
}

Important notes

• SummaryContent is rendered only if Collapsable="true" and the frame is collapsed.
• A click in the header collapses or expands a Collapsable frame, unless it is made in a field (input, textarea, select, option) placed in the header (TitleContent, HeaderContent, or Toolbar), or on an element that stops click propagation (toolbar buttons, LgButton by default, labels of LgCheckBox, LgToggle, and LgRadio). A manually written <label> HTML element in the header collapses the frame instead of activating its field: add @onclick:stopPropagation to it.
• Toolbar is automatically wrapped in an LgToolbar; ButtonSize drives the button size of this toolbar.
• Kind accepts the visual variants Primary, Default, Secondary, Success, Error, Warning, and Info.
• OnCommand receives commands from child components implementing IActionComponent, such as LgToolbarButton.

Properties

Name	Type	Default	Declared in	Description
ChildContent	RenderFragment	null	LgFrame	Main content of the frame.
FooterContent	RenderFragment	null	LgFrame	Footer content, rendered below the frame body.
HeaderContent	RenderFragment	null	LgFrame	Custom content added in the header, after the title and icon.
SummaryContent	RenderFragment	null	LgFrame	Content displayed instead of the body when the frame is collapsed.
TitleContent	RenderFragment	null	LgFrame	Custom title as markup, rendered in the title area.
Toolbar	RenderFragment	null	LgFrame	Toolbar rendered in the header via LgToolbar.
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgFrame	Additional HTML attributes applied to the root element.
ButtonSize	ButtonSize?	null	LgFrame	Size of the toolbar buttons. If not set, the App.BehaviorConfiguration.FrameToolbarButtonSize configuration is used.
ChildCssClass	string	null	LgFrame	CSS classes applied to the main content area.
Collapsable	bool	false	LgFrame	Enables collapse/expand of the frame via the header.
Collapsed	bool	false	LgFrame	Current collapsed state.
CollapsedChanged	EventCallback<bool>	—	LgFrame	Two-way binding callback for Collapsed.
CssClass	string	null	LgFrame	Additional CSS classes applied to the frame.
DefaultCollapsed	bool?	null	LgFrame	Initial state applied to Collapsed when initialized if the value is provided.
HeaderCssClass	string	null	LgFrame	CSS classes added to the header.
IconName	string	null	LgFrame	Icon displayed before the frame title.
Kind	Kind	Kind.Primary	LgFrame	Visual theme of the frame.
OnCommand	EventCallback<CommandEventArgs>	—	LgFrame	Receives commands bubbled by child components implementing IActionComponent.
OnToggle	EventCallback<ToggleFrameEventArgs>	—	LgFrame	Callback triggered during a collapse/expand action.
ShowHeader	bool	true	LgFrame	Completely hides the header if false.
Title	string	null	LgFrame	Text title of the frame.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute applied to the rendered title.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute.

Events

Event	Type	Description
CollapsedChanged	EventCallback<bool>	Triggered to synchronize a @bind-Collapsed.
OnCommand	EventCallback<CommandEventArgs>	Receives commands propagated by child components (for example a LgToolbarButton).
OnToggle	EventCallback<ToggleFrameEventArgs>	Triggered when a user collapses or expands the frame.

Associated Enumerations

ButtonSize

ButtonSize controls the ButtonSize property, used to size the toolbar buttons.

Value	Description
Medium	Standard size.
Small	Reduced size (default value of standard Lagoon configuration when ButtonSize remains null).
Large	Large size.

Kind

Kind controls the visual theme of the frame's Kind property.

Value	Description
Primary	Primary style (default value).
Default	Default style.
Secondary	Secondary style.
Success	"Success" style.
Error	"Error" style (danger).
Warning	"Warning" style.
Info	"Information" style.

Related components

• LgFilterFrame — specialized variant for filter panels.
• LgAccordion — container orchestrating multiple collapsible frames.
• LgSplitContainer — two-panel layout in which an LgFrame often fits.