LgSplitContainer

LgSplitContainer arranges two areas side by side or one above the other, separated by a resizable grip. It can store the size of the head panel in localStorage and allow it to be collapsed via the separator.

<LgSplitContainer>
    <HeadContent>Navigation</HeadContent>
    <MainContent>Main content</MainContent>
</LgSplitContainer>

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

Size persistence

Set StorageKey to store the size chosen by the user. Combine it with @bind-Collapsed if you also want to control the collapsed state from your page.

Usage

Filter panel on the left and results on the right

By default, the split is vertical: HeadContent is placed on the left and MainContent on the right. Set StorageKey to store the resized size in the application's localStorage.

OrdersWorkspacePage.razor

@inherits LgPage

<LgButton Text="#ToggleFilters"
          IconName="@IconNames.All.LayoutSidebar"
          Kind="ButtonKind.Secondary"
          OnClick="ToggleFiltersAsync" />

<LgSplitContainer Collapsable="true"
                  @bind-Collapsed="_isFiltersCollapsed"
                  HeadMinSize="280px"
                  HeadMaxSize="40%"
                  StorageKey="orders-workspace"
                  CssClass="mt-3">
    <HeadContent>
        <LgFilterFrame Title="#OrderFiltersTitle">
            <ChildListViewContent>
                <p>@("#OrderFiltersSummary".Translate())</p>
            </ChildListViewContent>
        </LgFilterFrame>
    </HeadContent>
    <MainContent>
        <LgFrame Title="#OrderResultsTitle">
            <p>@("#OrderResultsSummary".Translate()) @_resultCount</p>
        </LgFrame>
    </MainContent>
</LgSplitContainer>

OrdersWorkspacePage.razor.cs

public partial class OrdersWorkspacePage : LgPage
{
    // État lié au split : permet aussi de replier le panneau depuis un bouton externe.
    private bool _isFiltersCollapsed;

    // Donnée métier affichée dans le panneau principal.
    private int _resultCount = 24;

    // Bascule le panneau head sans manipuler le DOM : le composant synchronise ensuite le JavaScript.
    private Task ToggleFiltersAsync(ActionEventArgs args)
    {
        _isFiltersCollapsed = !_isFiltersCollapsed;
        return Task.CompletedTask;
    }
}

Horizontal orientation, reversed order, and locking

With Horizontal="true", HeadContent goes above MainContent and the HeadMinSize / HeadMaxSize limits apply to the height. Reversed places the head on the right or at the bottom depending on the orientation, and reverses the collapse direction.

PlanningWorkspacePage.razor

@inherits LgPage

<LgSplitContainer Horizontal="true"
                  Reversed="true"
                  Locked="@_isLayoutLocked"
                  HeadMinSize="120px"
                  HeadMaxSize="60%"
                  HeadCssClass="planning-details"
                  MainCssClass="planning-board">
    <HeadContent>
        <LgFrame Title="#PlanningDetailsTitle">
            <p>@("#PlanningDetailsContent".Translate())</p>
        </LgFrame>
    </HeadContent>
    <MainContent>
        <LgFrame Title="#PlanningBoardTitle">
            <p>@("#PlanningBoardContent".Translate())</p>
        </LgFrame>
    </MainContent>
</LgSplitContainer>

PlanningWorkspacePage.razor.cs

public partial class PlanningWorkspacePage : LgPage
{
    // Verrouille temporairement le redimensionnement pendant une opération métier sensible.
    private bool _isLayoutLocked = true;
}

Important notes

• If Collapsable="true", resizing below the internal 50 px threshold automatically hides the HeadContent panel.
• A double-click or double-tap on the separator hides the head; if it's already hidden, the size is reset and the StorageKey value is deleted.
• Locked="true" disables JavaScript resize interactions while the lock is active.
• The old StoreKey property is replaced by StorageKey.

Properties

Name	Type	Default	Declared in	Description
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgSplitContainer	Additional HTML attributes applied to the root element.
CssClass	string	null	LgSplitContainer	Additional CSS classes of the component.
Collapsable	bool	false	LgSplitContainer	Allows the HeadContent panel to be collapsed via the grip.
Collapsed	bool	false	LgSplitContainer	Current collapsed state of the head panel.
CollapsedChanged	EventCallback<bool>	—	LgSplitContainer	Two-way binding callback for Collapsed.
HeadContent	RenderFragment	null	LgSplitContainer	Content of the head panel (left or top depending on orientation).
HeadCssClass	string	null	LgSplitContainer	CSS classes of the head panel.
HeadMaxSize	string	null	LgSplitContainer	Maximum size of the head panel (400px, 50%, etc.).
HeadMinSize	string	null	LgSplitContainer	Minimum size of the head panel (100px, 10%, etc.).
Locked	bool	false	LgSplitContainer	Locks the separator to prevent it from moving.
MainCssClass	string	null	LgSplitContainer	CSS classes of the main panel.
Reversed	bool	false	LgSplitContainer	Reverses the position of panels and the collapse direction.
MainContent	RenderFragment	null	LgSplitContainer	Content of the main panel.
Horizontal	bool	false	LgSplitContainer	Switches the layout to horizontal mode (head on top / main on bottom).
StorageKey	string	null	LgSplitContainer	localStorage key used to persist the size of the head panel.

Events

Event	Type	Description
CollapsedChanged	EventCallback<bool>	Triggered when the collapsed state changes, including after user interaction on the grip.

Methods and interop

Method	Type	Description
OnCollapsedChangedFromJSAsync(bool collapsed)	Task	[JSInvokable] method called by JavaScript code when the user collapses or expands the head panel via the separator.

Related components

• LgFrame — container often embedded in each panel of the split.
• LgFilterFrame — good candidate for the head panel when it contains filters.
• LgAccordion — alternative solution for structuring when the need is for stacked sections.