LgSideTabContainer

LgSideTabContainer propose une navigation par onglets avec une colonne latérale redimensionnable. LgSideTab décrit chaque entrée du panneau latéral et peut afficher un bouton personnalisé via ButtonContent.

<LgSideTabContainer>
    <LgSideTab Key="summary" Title="#Summary" />
</LgSideTabContainer>

Espace de noms : Lagoon.UI.Components
Hérite de : LgCustomTabContainer → LgAriaComponentBase → LgComponentBase
Interfaces : IDisposable, IPageTitleHandler, IPageCloser, IPageReloader, IPageDefaultLayoutProvider, ICommandListener
Package NuGet : Lagoon.UI

Panneau latéral persistant

Utilisez StoreKey pour mémoriser la largeur du panneau latéral dans le navigateur et retrouver la même disposition d'une session à l'autre.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

StoreKey mémorise la largeur du panneau dans le navigateur. HeadMinSize, HeadMaxSize, Locked et Collapsable pilotent le redimensionnement et la réduction du panneau.

SideTabsPage.razor
@inherits LgPage

<LgSideTabContainer @bind-ActiveTabKey="_activeTabKey"
                    Collapsable="true"
                    HeadMinSize="220px"
                    HeadMaxSize="360px"
                    HeadCssClass="app-side-tabs"
                    MainCssClass="app-side-tabs-content"
                    StoreKey="orders-side-tabs"
                    DefaultActiveTabKey="summary"
                    OnActivateTab="OnActivateTabAsync"
                    OnClosingTab="OnClosingTabAsync"
                    OnCloseTab="OnCloseTabAsync">
    <LgSideTab Key="summary"
               Title="#Summary"
               IconName="@IconNames.All.ListUl"
               Uri="orders/summary" />

    <LgSideTab Key="history"
               Title="#History"
               IconName="@IconNames.All.ClockHistory"
               Uri="orders/history"
               PreloadContent="true" />

    <LgSideTab Key="documents"
               Title="#Documents"
               AriaLabel="#Documents"
               Uri="orders/documents">
        <ButtonContent>
            <LgIcon IconName="@IconNames.All.Paperclip" />
        </ButtonContent>
    </LgSideTab>
</LgSideTabContainer>

SideTabsPage.razor.cs
public partial class SideTabsPage : LgPage
{
    // Clé active liée au conteneur : permet de synchroniser la navigation latérale avec le code.
    private string _activeTabKey = "summary";

    // Déclenché après activation : utile pour mémoriser le dernier panneau consulté.
    private Task OnActivateTabAsync(ActivateTabEventArgs args)
    {
        _activeTabKey = args.Tab.Key;
        return Task.CompletedTask;
    }

    // Déclenché avant fermeture : annulez si le panneau contient des modifications à conserver.
    private Task OnClosingTabAsync(ClosingTabEventArgs args)
    {
        args.Cancel = false;
        return Task.CompletedTask;
    }

    // Déclenché après fermeture effective : nettoyez ici un état local associé au panneau.
    private Task OnCloseTabAsync(CloseTabEventArgs args)
    {
        string closedTabKey = args.Key;
        return Task.CompletedTask;
    }
}

Charger le contenu dès l'ouverture

PreloadTabContent précharge tous les panneaux. PreloadContent surcharge ce comportement pour un onglet précis.

PreloadedSideTabsPage.razor
@inherits LgPage

<LgSideTabContainer PreloadTabContent="true" Locked="true" HeadMinSize="240px" HeadMaxSize="320px">
    <LgSideTab Key="summary" Title="#Summary" Uri="orders/summary" />
    <LgSideTab Key="statistics" Title="#Statistics" Uri="orders/statistics" PreloadContent="false" />
</LgSideTabContainer>

Grouper les onglets ou mixer d'autres composants

Le contenu du panneau latéral est un RenderFragment : vous pouvez organiser les LgSideTab dans un LgFrame, un LgAccordion ou ajouter un bouton de navigation complémentaire.

GroupedSideTabsPage.razor
@inherits LgPage

<LgSideTabContainer StoreKey="grouped-orders-side-tabs">
    <LgFrame Title="#OrdersGroup" Collapsable="true" DefaultCollapsed="false">
        <LgSideTab Key="orders-open" Title="#OpenOrders" IconName="@IconNames.All.Cart3" Uri="orders/open" />
        <LgSideTab Key="orders-closed" Title="#ClosedOrders" IconName="@IconNames.All.Archive" Uri="orders/closed" />
    </LgFrame>

    <LgAccordion>
        <LgAccordionPane Title="#SupportGroup">
            <LgSideTab Key="faq" Title="#Faq" IconName="@IconNames.Question" Uri="help/faq" />
            <LgButton Text="#OpenDocumentation" Kind="ButtonKind.Link" Uri="help/documentation" />
        </LgAccordionPane>
    </LgAccordion>
</LgSideTabContainer>

Naviguer vers un onglet depuis une autre page

Ajoutez une route avec une clé d'onglet, puis liez cette valeur à ActiveTabKey. La page extérieure peut utiliser le LgPageLink exposé par la page d'onglets.

OrdersSideTabsPage.razor
@inherits LgPage

<LgSideTabContainer @bind-ActiveTabKey="_activeTabKey" DefaultActiveTabKey="summary">
    <LgSideTab Key="summary" Title="#Summary" IconName="@IconNames.All.ListUl" Uri="orders/summary" />
    <LgSideTab Key="history" Title="#History" IconName="@IconNames.All.ClockHistory" Uri="orders/history" />
    <LgSideTab Key="documents" Title="#Documents" IconName="@IconNames.All.Paperclip" Uri="orders/documents" />
</LgSideTabContainer>

OrdersSideTabsPage.razor.cs
[Route(ROUTE)]
[Route(ROUTE + "/{RequestedTabKey}")]
public partial class OrdersSideTabsPage : LgPage
{
    // Route de la page d'onglets : réutilisée pour créer des liens vers un panneau précis.
    private const string ROUTE = "orders-tabs";

    // Paramètre de route optionnel : porte la clé de l'onglet à activer à l'arrivée.
    [Parameter]
    public string RequestedTabKey { get; set; }

    // Clé active liée au conteneur ; initialisée depuis la route ou sur le panneau résumé.
    private string _activeTabKey = "summary";

    // Crée un lien vers la page en ciblant directement l'onglet demandé.
    public static LgPageLink Link(string tabKey)
    {
        return LgPageLink.Create($"{ROUTE}/{tabKey}", "#OrdersTabs", IconNames.All.ListUl);
    }

    // Synchronise le paramètre de route avec le binding du conteneur à chaque navigation.
    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        _activeTabKey = string.IsNullOrEmpty(RequestedTabKey) ? "summary" : RequestedTabKey;
    }
}

OrdersOverviewPage.razor
@inherits LgPage

<LgButton Text="#OpenHistory" Kind="ButtonKind.Link" Link='@OrdersSideTabsPage.Link("history")' />

URI des onglets

Comme pour LgTabContainer, utilisez des URI relatives sans / initial (Uri="orders/history" plutôt que Uri="/orders/history").

Propriétés

Toutes les propriétés [Parameter] de LgSideTabContainer, y compris celles héritées.

Nom	Type	Défaut	Déclaré dans	Description
`Collapsable`	`bool`	`false`	`LgSideTabContainer`	Autorise la réduction du panneau latéral.
`HeadCssClass`	`string`	`null`	`LgSideTabContainer`	Classes CSS du panneau latéral.
`HeadMaxSize`	`string`	`null`	`LgSideTabContainer`	Taille maximale du panneau latéral (ex. `"360px"`).
`HeadMinSize`	`string`	`null`	`LgSideTabContainer`	Taille minimale du panneau latéral.
`Locked`	`bool`	`false`	`LgSideTabContainer`	Verrouille le redimensionnement du panneau.
`MainCssClass`	`string`	`null`	`LgSideTabContainer`	Classes CSS de la zone de contenu principale.
`StoreKey`	`string`	`null`	`LgSideTabContainer`	Clé `localStorage` utilisée pour mémoriser la largeur du panneau.
`ChildContent`	`RenderFragment`	`null`	`LgCustomTabContainer`	Déclaration des `LgSideTab` contenus dans le composant.
`ActiveTabKey`	`string`	`null`	`LgCustomTabContainer`	Clé de l'onglet actif. Utilisable avec `@bind-ActiveTabKey`.
`ActiveTabKeyChanged`	`EventCallback<string>`	—	`LgCustomTabContainer`	Callback du binding sur `ActiveTabKey`.
`CssClass`	`string`	`null`	`LgCustomTabContainer`	Classes CSS additionnelles du conteneur.
`DefaultActiveTabKey`	`string`	`null`	`LgCustomTabContainer`	Clé de l'onglet activé par défaut.
`DefaultLayout`	`Type`	`null`	`LgCustomTabContainer`	Layout appliqué aux pages ouvertes si elles n'en déclarent pas.
`GetTabKeyFromUri`	`Func<string, string>`	`null`	`LgCustomTabContainer`	Fonction personnalisant la génération de clé depuis l'URI.
`PreloadTabContent`	`bool`	`false`	`LgCustomTabContainer`	Précharge le contenu des onglets dès leur création.
`OnActivateTab`	`EventCallback<ActivateTabEventArgs>`	—	`LgCustomTabContainer`	Déclenché après activation d'un onglet.
`OnClosingTab`	`EventCallback<ClosingTabEventArgs>`	—	`LgCustomTabContainer`	Déclenché avant fermeture d'un onglet.
`OnCloseTab`	`EventCallback<CloseTabEventArgs>`	—	`LgCustomTabContainer`	Déclenché après fermeture effective d'un onglet.
`ReloadDisabled`	`bool`	`false`	`LgCustomTabContainer`	Désactive le rechargement de l'onglet actif.
`AriaLabel`	`string`	`null`	`LgAriaComponentBase`	Valeur de l'attribut `aria-label`.
`AriaLabelledBy`	`string`	`null`	`LgAriaComponentBase`	Valeur de l'attribut `aria-labelledby`.

Onglet associé : `LgSideTab`

Nom	Type	Défaut	Déclaré dans	Description
`ButtonContent`	`RenderFragment`	`null`	`LgSideTab`	Contenu personnalisé du bouton d'onglet latéral.
`ChildContent`	`RenderFragment`	`null`	`LgCustomTab`	Contenu statique du panneau.
`CssClass`	`string`	`null`	`LgCustomTab`	Classes CSS additionnelles.
`Disabled`	`bool`	`false`	`LgCustomTab`	Désactive l'onglet.
`IconName`	`string`	`null`	`LgCustomTab`	Icône affichée. Si absente, `Link.IconName` est utilisé.
`Key`	`string`	`null`	`LgCustomTab`	Identifiant unique de l'onglet. Si absent, Lagoon génère la clé depuis `Uri` ou depuis un identifiant interne.
`Link`	`LgPageLink`	`null`	`LgCustomTab`	Lien typé vers une page Lagoon.
`OnReload`	`EventCallback`	—	`LgCustomTab`	Callback déclenché lors d'un rechargement.
`PreloadContent`	`bool?`	`null`	`LgCustomTab`	Préchargement spécifique à cet onglet.
`Title`	`string`	`null`	`LgCustomTab`	Titre du bouton d'onglet.
`Tooltip`	`string`	`null`	`LgCustomTab`	Tooltip du bouton d'onglet.
`TooltipIsHtml`	`bool`	`false`	`LgCustomTab`	Indique si le tooltip est au format HTML.
`Uri`	`string`	`null`	`LgCustomTab`	URI Blazor ou externe chargée dans le panneau.
`UseIFrame`	`bool`	`false`	`LgCustomTab`	Charge le contenu via une IFrame.
`AriaLabel`	`string`	`null`	`LgAriaComponentBase`	Valeur de l'attribut `aria-label`.
`AriaLabelledBy`	`string`	`null`	`LgAriaComponentBase`	Valeur de l'attribut `aria-labelledby`.

Événements

Événement	Type	Description
`OnActivateTab`	`EventCallback<ActivateTabEventArgs>`	Déclenché après activation ; `args.Tab.Key` et `args.Tab.Uri` identifient l'onglet actif.
`OnClosingTab`	`EventCallback<ClosingTabEventArgs>`	Déclenché avant fermeture ; permet d'annuler via `Cancel`.
`OnCloseTab`	`EventCallback<CloseTabEventArgs>`	Déclenché après fermeture effective.
`OnReload`	`EventCallback`	Déclenché sur le `LgSideTab` concerné lors d'un rechargement.

Accessibilité

Donnez toujours un Title ou un AriaLabel aux LgSideTab, surtout si ButtonContent ne contient qu'une icône.
Vérifiez que le panneau reste exploitable lorsqu'il est réduit (Collapsable="true").
Évitez les contenus trop denses dans ButtonContent pour conserver une navigation latérale lisible.

Composants liés

LgTabContainer — variante horizontale.
LgMenuConfiguration — complète la navigation applicative globale.
LgBreadcrumbTrail — utile dans le contenu affiché par les panneaux.

Utilisation​

Démonstration​

Construire une navigation latérale redimensionnable​

Charger le contenu dès l'ouverture​

Grouper les onglets ou mixer d'autres composants​

Naviguer vers un onglet depuis une autre page​

Propriétés​

Onglet associé : LgSideTab​

Événements​

Accessibilité​

Composants liés​