LgAccordion

LgAccordion groups multiple LgAccordionPane panels and ensures that only one panel remains open at a time. Each pane is a specialized LgFrame, collapsible and closed by default.

<LgAccordion>
    <LgAccordionPane Title="Section 1">
        Content
    </LgAccordionPane>
</LgAccordion>

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

Specialized pane

LgAccordionPane inherits from LgFrame, with Collapsable = true and DefaultCollapsed = true. The container also reassigns OnToggle to automatically close the other panels.

Usage

Demonstration

Try this component in the Lagoon showcase.

Simple accordion with three panels

Each LgAccordionPane is an LgFrame that is collapsible and closed by default. The container ensures that only one panel is open at a time.

CustomerDetailsPage.razor

@inherits LgPage

<LgAccordion CssClass="customer-accordion">
    <LgAccordionPane Title="#CustomerContactTitle"
                     IconName="@IconNames.All.People">
        <HeaderContent>
            <span>@("#CustomerContactHeader".Translate())</span>
        </HeaderContent>
        <ChildContent>
            <p>@_customerContact</p>
        </ChildContent>
    </LgAccordionPane>

    <LgAccordionPane Title="#DeliveryAddressTitle"
                     Kind="Kind.Secondary">
        <ChildContent>
            <p>@_deliveryAddress</p>
        </ChildContent>
    </LgAccordionPane>

    <LgAccordionPane Title="#BillingAddressTitle"
                     Kind="Kind.Default">
        <ChildContent>
            <p>@_billingAddress</p>
        </ChildContent>
    </LgAccordionPane>
</LgAccordion>

CustomerDetailsPage.razor.cs

public partial class CustomerDetailsPage : LgPage
{
    // Information displayed in the first accordion panel.
    private string _customerContact = "Marie Martin — marie.martin@example.test";

    // Business address displayed in the delivery panel.
    private string _deliveryAddress = "12 rue des Peupliers, 44000 Nantes";

    // Business address displayed in the billing panel.
    private string _billingAddress = "18 avenue du Port, 44000 Nantes";
}

Enriched panel as a frame

Since LgAccordionPane inherits from LgFrame, you can reuse Toolbar, SummaryContent, FooterContent, HeaderContent, Kind, IconName, and OnCommand. However, avoid driving OnToggle in a pane contained by LgAccordion: the container uses it to close the other panels.

ContractAccordionPage.razor

@inherits LgPage

<LgAccordion>
    <LgAccordionPane Title="#ContractDocumentsTitle"
                     IconName="@IconNames.All.Folder"
                     Kind="Kind.Info"
                     OnCommand="OnDocumentsCommandAsync">
        <Toolbar>
            <LgToolbarButton Text="#ExportDocuments"
                             IconName="@IconNames.All.Pdf"
                             CommandName="export-documents" />
        </Toolbar>
        <ChildContent>
            <p>@("#ContractDocumentsContent".Translate())</p>
        </ChildContent>
        <SummaryContent>
            <p>@("#ContractDocumentsSummary".Translate()) @_documentCount</p>
        </SummaryContent>
        <FooterContent>
            <p>@("#ContractDocumentsFooter".Translate())</p>
        </FooterContent>
    </LgAccordionPane>

    <LgAccordionPane Title="#ContractHistoryTitle"
                     IconName="@IconNames.All.ClockHistory">
        <ChildContent>
            <p>@("#ContractHistoryContent".Translate())</p>
        </ChildContent>
    </LgAccordionPane>
</LgAccordion>

ContractAccordionPage.razor.cs

public partial class ContractAccordionPage : LgPage
{
    // Counter displayed in the summary when the documents panel is collapsed.
    private int _documentCount = 7;

    // Centralizes the commands of the documents panel toolbar.
    private Task OnDocumentsCommandAsync(CommandEventArgs args)
    {
        if (args.CommandName == "export-documents")
        {
            args.Handled = true;
        }

        return Task.CompletedTask;
    }
}

Points of attention

• LgAccordion does not expose a public property to directly select the active panel.
• Panes are initialized with Collapsable="true" and DefaultCollapsed="true".
• Frame properties remain available on each pane, but exclusive opening is managed by the container.

Properties

Properties of LgAccordion

Name	Type	Default	Declared in	Description
ChildContent	RenderFragment	null	LgAccordion	Container content, usually a list of LgAccordionPane.
CssClass	string	null	LgAccordion	Additional CSS classes applied to the accordion container.

Properties of LgAccordionPane

Name	Type	Default	Declared in	Description
ChildContent	RenderFragment	null	LgFrame	Main content of the panel.
FooterContent	RenderFragment	null	LgFrame	Footer content of the panel.
HeaderContent	RenderFragment	null	LgFrame	Free content displayed in the panel header.
SummaryContent	RenderFragment	null	LgFrame	Summary displayed when the panel is collapsed.
TitleContent	RenderFragment	null	LgFrame	Custom title in markup.
Toolbar	RenderFragment	null	LgFrame	Toolbar rendered in the panel header.
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgFrame	Additional HTML attributes applied to the panel root.
ButtonSize	ButtonSize?	null	LgFrame	Size of toolbar buttons.
ChildCssClass	string	null	LgFrame	CSS classes applied to the main content.
Collapsable	bool	true	LgFrame	Inherited parameter; the default value is provided by the pane constructor.
Collapsed	bool	false	LgFrame	Current collapsed state. On first render, the pane starts closed via DefaultCollapsed.
CollapsedChanged	EventCallback<bool>	—	LgFrame	Two-way binding callback for Collapsed.
CssClass	string	accordion-item	LgFrame	CSS class applied to the pane. LgAccordionPane.OnInitialized sets it to accordion-item.
DefaultCollapsed	bool?	true	LgFrame	Inherited parameter; the default value applied to Collapsed is provided by the pane constructor.
HeaderCssClass	string	null	LgFrame	CSS classes for the pane header.
IconName	string	null	LgFrame	Icon displayed in front of the panel title.
Kind	Kind	Kind.Primary	LgFrame	Visual theme of the pane.
OnCommand	EventCallback<CommandEventArgs>	—	LgFrame	Reception of commands bubbled from the pane content.
OnToggle	EventCallback<ToggleFrameEventArgs>	—	LgFrame	Reassigned by LgAccordion to automatically close the other panes.
ShowHeader	bool	true	LgFrame	Shows or hides the pane header.
Title	string	null	LgFrame	Text title of the panel.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute.

Events

LgAccordion does not expose its own public event. LgAccordionPane adopts the callbacks from LgFrame.

Event	Type	Description
CollapsedChanged	EventCallback<bool>	Binding callback to track the collapsed state of a pane.
OnCommand	EventCallback<CommandEventArgs>	Receives commands bubbled by child components of the pane.
OnToggle	EventCallback<ToggleFrameEventArgs>	Used internally by LgAccordion to enforce exclusive opening of only one pane at a time.

Associated enumerations

The enumerations below concern parameters inherited from LgFrame exposed by LgAccordionPane.

Kind

Kind controls the visual theme of the inherited Kind property of the pane. See the complete table in LgFrame (default value: Kind.Primary).

ButtonSize

ButtonSize controls the inherited ButtonSize property, used to size the toolbar buttons of the pane.

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

Related components

• LgFrame — base component from which LgAccordionPane inherits.
• LgFilterFrame — another specialized frame variant.
• LgSplitContainer — layout useful for juxtaposing an accordion and a work area.