LgSplitContainer

LgSplitContainer dispose deux zones côte à côte ou l'une au-dessus de l'autre, séparées par un grip redimensionnable. Il peut mémoriser la taille du panneau head dans le localStorage et autoriser son repli via le séparateur.

<LgSplitContainer>
    <HeadContent>Navigation</HeadContent>
    <MainContent>Contenu principal</MainContent>
</LgSplitContainer>

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

Persistance de taille

Renseignez StorageKey pour mémoriser la taille choisie par l'utilisateur. Combinez-le avec @bind-Collapsed si vous voulez aussi piloter l'état replié depuis votre page.

Utilisation

Panneau de filtres à gauche et résultats à droite

Par défaut, le split est vertical : HeadContent est placé à gauche et MainContent à droite. Renseignez StorageKey pour mémoriser la taille redimensionnée dans le localStorage de l'application.

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;
    }
}

Orientation horizontale, ordre inversé et verrouillage

Avec Horizontal="true", HeadContent passe au-dessus de MainContent et les limites HeadMinSize / HeadMaxSize s'appliquent à la hauteur. Reversed place le head à droite ou en bas selon l'orientation, et inverse le sens de repli.

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;
}

Points d'attention

• Si Collapsable="true", un redimensionnement sous le seuil interne de 50 px masque automatiquement le panneau HeadContent.
• Un double-clic ou double-tap sur le séparateur masque le head ; s'il est déjà masqué, la taille est réinitialisée et la valeur StorageKey est supprimée.
• Locked="true" désactive les interactions JavaScript de redimensionnement tant que le verrou est actif.
• L'ancienne propriété StoreKey est remplacée par StorageKey.

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgSplitContainer	Attributs HTML additionnels appliqués à l'élément racine.
CssClass	string	null	LgSplitContainer	Classes CSS additionnelles du composant.
Collapsable	bool	false	LgSplitContainer	Autorise le repli du panneau HeadContent via le grip.
Collapsed	bool	false	LgSplitContainer	État replié courant du panneau head.
CollapsedChanged	EventCallback<bool>	—	LgSplitContainer	Callback de two-way binding pour Collapsed.
HeadContent	RenderFragment	null	LgSplitContainer	Contenu du panneau head (gauche ou haut selon l'orientation).
HeadCssClass	string	null	LgSplitContainer	Classes CSS du panneau head.
HeadMaxSize	string	null	LgSplitContainer	Taille maximale du panneau head (400px, 50%, etc.).
HeadMinSize	string	null	LgSplitContainer	Taille minimale du panneau head (100px, 10%, etc.).
Locked	bool	false	LgSplitContainer	Verrouille le séparateur pour empêcher son déplacement.
MainCssClass	string	null	LgSplitContainer	Classes CSS du panneau principal.
Reversed	bool	false	LgSplitContainer	Inverse la position des panneaux et le sens de repli.
MainContent	RenderFragment	null	LgSplitContainer	Contenu du panneau principal.
Horizontal	bool	false	LgSplitContainer	Passe la disposition en mode horizontal (head en haut / main en bas).
StorageKey	string	null	LgSplitContainer	Clé localStorage utilisée pour persister la taille du panneau head.

Événements

Événement	Type	Description
CollapsedChanged	EventCallback<bool>	Déclenché lorsque l'état replié change, y compris après une interaction utilisateur sur le grip.

Méthodes et interop

Méthode	Type	Description
OnCollapsedChangedFromJSAsync(bool collapsed)	Task	Méthode [JSInvokable] appelée par le code JavaScript lorsque l'utilisateur replie ou déplie le panneau head via le séparateur.

Composants liés

• LgFrame — conteneur souvent embarqué dans chaque panneau du split.
• LgFilterFrame — bon candidat pour le panneau head lorsqu'il contient des filtres.
• LgAccordion — autre solution de structuration quand le besoin porte sur des sections empilées.