LgTabContainer

LgTabContainer pilote une navigation par onglets horizontaux dans l'application. Il gère l'activation, l'ouverture dynamique, la fermeture, le déplacement et le rechargement des onglets, tandis que LgTab décrit chaque onglet déclaré dans le markup.

<LgTabContainer>
    <LgTab Key="dashboard" Title="#Dashboard" Uri="dashboard" />
</LgTabContainer>

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

Onglets déclaratifs et dynamiques

Utilisez des LgTab pour les onglets connus au rendu initial, puis OpenTabAsync() pour ouvrir un onglet à la demande depuis le code.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Déclarer des onglets statiques

Déclarez des LgTab lorsque les onglets sont connus dès le rendu initial. Utilisez une URI relative sans / initial pour ouvrir une page Lagoon, ou ChildContent pour un contenu statique local.

TabDemoPage.razor
@inherits LgPage

<LgTabContainer AllowClose="true"
                AllowDragDrop="true"
                ShowTabList="true"
                DefaultActiveTabKey="dashboard"
                PreloadTabContent="false">
    <BeforeHeaderContent>
        <LgLabel Text="#Workspace" CssClass="me-2" />
    </BeforeHeaderContent>

    <AfterHeaderContent>
        <LgButton Text="#OpenSettingsTab" IconName="@IconNames.Admin" OnClick="OpenSettingsTabAsync" />
    </AfterHeaderContent>

    <LgTab Key="dashboard" Title="#Dashboard" IconName="@IconNames.Home" Closable="false">
        <LgLabel Text="#DashboardContent" />
    </LgTab>

    <LgTab Key="orders"
           Title="#OrdersTab"
           IconName="@IconNames.All.Cart3"
           Uri="orders"
           Closable="true"
           OnReload="ReloadOrdersAsync" />

    <LgTab Key="help"
           Title="#HelpTab"
           Tooltip="#HelpTooltip"
           Uri="help"
           UseIFrame="true"
           Draggable="false" />
</LgTabContainer>

TabDemoPage.razor.cs
public partial class TabDemoPage : LgPage
{
    // Recharge les données de l'onglet quand l'utilisateur demande un refresh de son contenu.
    private async Task ReloadOrdersAsync()
    {
        try
        {
            await Task.CompletedTask;
            ShowSuccess("#OrdersReloaded");
        }
        catch (Exception ex)
        {
            ShowException(ex);
        }
    }
}

Ouvrir un onglet par code

Référencez le conteneur avec @ref, puis appelez OpenTabAsync(string uri, bool closable = true). Si l'URI est déjà ouverte, l'onglet correspondant est réactivé.

DynamicTabsPage.razor
@inherits LgPage

<LgButton Text="#OpenSettingsTab" IconName="@IconNames.Admin" OnClick="OpenSettingsTabAsync" />

<LgTabContainer @ref="_tabContainer" ShowTabList="true">
    <LgTab Key="dashboard" Title="#Dashboard" IconName="@IconNames.Home" Uri="dashboard" />
</LgTabContainer>

DynamicTabsPage.razor.cs
public partial class DynamicTabsPage : LgPage
{
    // Référence du conteneur : nécessaire pour ouvrir ou réactiver un onglet depuis un bouton externe.
    private LgTabContainer _tabContainer;

    // Ouvre l'onglet settings avec une URI relative ; le paramètre closable autorise sa fermeture.
    private Task OpenSettingsTabAsync(ActionEventArgs args)
    {
        return _tabContainer.OpenTabAsync("settings", closable: true);
    }
}

Piloter l'onglet actif et réagir aux événements

@bind-ActiveTabKey synchronise la clé active avec le code-behind. Les événements se déclarent sur la balise du conteneur ; ce ne sont pas des méthodes à surcharger.

BoundTabsPage.razor
@inherits LgPage

<LgTabContainer @bind-ActiveTabKey="_activeTabKey"
                AllowClose="true"
                AllowDragDrop="true"
                OnActivateTab="OnActivateTabAsync"
                OnClosingTab="OnClosingTabAsync"
                OnCloseTab="OnCloseTabAsync"
                OnDropTab="OnDropTabAsync">
    <LgTab Key="dashboard" Title="#Dashboard" IconName="@IconNames.Home" Uri="dashboard" Closable="false" />
    <LgTab Key="orders" Title="#OrdersTab" IconName="@IconNames.All.Cart3" Uri="orders" Closable="true" />
</LgTabContainer>

BoundTabsPage.razor.cs
public partial class BoundTabsPage : LgPage
{
    // Clé de l'onglet actif : modifiez-la pour changer d'onglet depuis le code.
    private string _activeTabKey = "dashboard";

    // Déclenché après activation : utile pour charger un complément de données lié à l'onglet.
    private Task OnActivateTabAsync(ActivateTabEventArgs args)
    {
        _activeTabKey = args.Tab.Key;
        return Task.CompletedTask;
    }

    // Déclenché avant fermeture : annulez pour protéger un onglet épinglé ou non sauvegardé.
    private Task OnClosingTabAsync(ClosingTabEventArgs args)
    {
        if (args.Key == "dashboard")
        {
            args.Cancel = true;
        }
        return Task.CompletedTask;
    }

    // Déclenché après fermeture : persistez l'état si l'ordre ou la liste des onglets doit être restauré.
    private Task OnCloseTabAsync(CloseTabEventArgs args)
    {
        string closedTabKey = args.Key;
        return Task.CompletedTask;
    }

    // Déclenché après glisser-déposer : DropIndex donne la nouvelle position de l'onglet déplacé.
    private Task OnDropTabAsync(DropTabEventArgs args)
    {
        int dropIndex = args.DropIndex;
        return Task.CompletedTask;
    }
}

Personnaliser les clés d'onglets dynamiques

GetTabKeyFromUri permet de regrouper plusieurs URI sous une même clé d'onglet, par exemple pour réutiliser l'onglet détail d'une commande quel que soit l'identifiant demandé.

TabKeyPage.razor
@inherits LgPage

<LgTabContainer GetTabKeyFromUri="BuildTabKeyFromUri"
                ReloadDisabled="true">
    <LgTab Key="orders" Title="#OrdersTab" IconName="@IconNames.All.Cart3" Uri="orders" />
</LgTabContainer>

TabKeyPage.razor.cs
public partial class TabKeyPage : LgPage
{
    // Construit une clé stable pour éviter d'ouvrir un nouvel onglet à chaque variation d'identifiant.
    private static string BuildTabKeyFromUri(string uri)
    {
        return uri.StartsWith("orders/detail/", StringComparison.OrdinalIgnoreCase) ? "OrderDetail" : uri;
    }
}

Propriétés

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

Nom	Type	Défaut	Déclaré dans	Description
`BeforeHeaderContent`	`RenderFragment`	`null`	`LgTabContainer`	Contenu rendu avant l'en-tête des onglets.
`AfterHeaderContent`	`RenderFragment`	`null`	`LgTabContainer`	Contenu rendu après l'en-tête des onglets.
`AllowClose`	`bool`	`false`	`LgTabContainer`	Autorise la fermeture des onglets.
`AllowDragDrop`	`bool`	`false`	`LgTabContainer`	Autorise le déplacement des onglets par glisser-déposer.
`ShowTabList`	`bool`	`false`	`LgTabContainer`	Affiche un menu listant les onglets ouverts.
`ChildContent`	`RenderFragment`	`null`	`LgCustomTabContainer`	Déclaration des `LgTab` 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 dans les onglets 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. Permet d'annuler via `Cancel`.
`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é : `LgTab`

Nom	Type	Défaut	Déclaré dans	Description
`Closable`	`bool`	`false`	`LgTab`	Rend l'onglet fermable individuellement.
`Draggable`	`bool`	`true`	`LgTab`	Autorise le déplacement de cet onglet.
`ChildContent`	`RenderFragment`	`null`	`LgCustomTab`	Contenu statique de l'onglet.
`CssClass`	`string`	`null`	`LgCustomTab`	Classes CSS additionnelles du bouton et du panneau.
`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 ; peut fournir titre, icône et URI.
`OnReload`	`EventCallback`	—	`LgCustomTab`	Callback déclenché lors d'un rechargement demandé sur l'onglet.
`PreloadContent`	`bool?`	`null`	`LgCustomTab`	Préchargement spécifique à cet onglet ; surcharge `PreloadTabContent`.
`Title`	`string`	`null`	`LgCustomTab`	Titre affiché sur l'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 l'onglet.
`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` exposent l'onglet actif.
`OnClosingTab`	`EventCallback<ClosingTabEventArgs>`	Déclenché avant fermeture ; `args.Cancel = true` bloque la fermeture.
`OnCloseTab`	`EventCallback<CloseTabEventArgs>`	Déclenché après fermeture d'un onglet.
`OnDropTab`	`EventCallback<DropTabEventArgs>`	Déclenché après déplacement d'un onglet lorsque `AllowDragDrop` est activé.
`OnReload`	`EventCallback`	Déclenché sur le `LgTab` concerné lorsqu'un rechargement est demandé.

Méthodes publiques

Méthode	Signature	Description
`OpenTabAsync`	`Task OpenTabAsync(string uri, bool closable = true)`	Ouvre un onglet à partir d'une URI et l'active immédiatement.

Types associés

`ActivateTabEventArgs`

Propriété	Type	Description
`Tab`	`ITab`	Onglet activé. `ITab` expose `Key` et `Uri`.

`ClosingTabEventArgs`

Propriété	Type	Description
`Key`	`string`	Clé de l'onglet en cours de fermeture.
`Cancel`	`bool`	Passez à `true` pour empêcher la fermeture.

`CloseTabEventArgs`

Propriété	Type	Description
`Key`	`string`	Clé de l'onglet fermé.

`DropTabEventArgs`

Propriété	Type	Description
`Key`	`string`	Clé de l'onglet déplacé.
`DropIndex`	`int`	Nouvelle position de l'onglet.

Accessibilité

Fournissez un Title explicite ou un AriaLabel si l'onglet n'affiche qu'une icône.
Utilisez Tooltip pour expliciter le rôle d'onglets compacts ou dont le texte est tronqué.
Évitez d'empêcher la fermeture sans signal visuel clair quand AllowClose est activé globalement.

Composants liés

LgSideTabContainer — variante à navigation latérale.
LgMenuConfiguration — peut alimenter TabContainerToolbar.
LgBreadcrumbTrail — complète la navigation contextuelle dans les pages ouvertes en onglet.

Utilisation​

Démonstration​

Déclarer des onglets statiques​

Ouvrir un onglet par code​

Piloter l'onglet actif et réagir aux événements​

Personnaliser les clés d'onglets dynamiques​

Propriétés​

Onglet associé : LgTab​

Événements​

Méthodes publiques​

Types associés​

ActivateTabEventArgs​

ClosingTabEventArgs​

CloseTabEventArgs​

DropTabEventArgs​

Accessibilité​

Composants liés​