LgMenuConfiguration

LgMenuConfiguration centralise la déclaration du menu principal, de la sidebar et des barres d'outils de l'application. C'est un composant de configuration sans rendu visuel propre, à placer dans le layout.

<LgMenuConfiguration>
    <Menu>
        <LgMenuItem Text="#Home" IconName="@IconNames.HouseFill" Uri="dashboard" />
    </Menu>
</LgMenuConfiguration>

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

Configuration centralisée

Placez un seul LgMenuConfiguration dans le layout applicatif, puis répartissez les entrées entre Menu, Sidebar, Toolbar et TabContainerToolbar selon leur zone d'affichage.

Utilisation

Définir un menu simple dans le layout

Déclarez le menu dans un composant dédié du projet client (souvent Shared/MenuConfiguration.razor). Les quatre zones correspondent au menu principal, à la sidebar, à la toolbar et à la toolbar du conteneur d'onglets applicatif.

MenuConfiguration.razor

<LgMenuConfiguration>
    <Menu>
        <LgMenuItem Text="#Home" IconName="@IconNames.Home" Uri="dashboard" />
        <LgMenuItem Link="@OrdersPage.Link()" />
    </Menu>

    <Sidebar>
        <LgMenuTitle Text="#Navigation" />
        <LgMenuItem Text="#Orders" IconName="@IconNames.All.Cart3" Uri="orders" />
        <LgMenuSeparator />
        <LgMenuItem Text="#Help" IconName="@IconNames.Question" Uri="help" />
    </Sidebar>

    <Toolbar>
        <LgMenuItem Text="#Refresh" IconName="@IconNames.Loading" OnClick="RefreshDashboardAsync" />
    </Toolbar>

    <TabContainerToolbar>
        <LgMenuItem Text="#OpenOrders" IconName="@IconNames.All.BoxArrowUpRight" Uri="orders" />
    </TabContainerToolbar>
</LgMenuConfiguration>

MenuConfiguration.razor.cs

public partial class MenuConfiguration : LgComponentBase
{
    // Relance le chargement des données visibles dans le tableau de bord depuis la toolbar.
    private async Task RefreshDashboardAsync(ActionEventArgs args)
    {
        try
        {
            await Task.CompletedTask;
            ShowSuccess("#DashboardRefreshed");
        }
        catch (Exception ex)
        {
            ShowException(ex);
        }
    }
}

Factoriser des groupes avec LgMenuSet

MenuSetDeclarations déclare des groupes réutilisables identifiés par Id. LgIncludeMenuSet les insère ensuite dans une ou plusieurs zones. Utilisez AuthorizeView pour la visibilité conditionnelle : LgMenuItem n'a pas de paramètre PolicyVisible.

MenuConfiguration.razor

<LgMenuConfiguration>
    <MenuSetDeclarations>
        <LgMenuSet Id="common-menu">
            <LgMenuItem Text="#Home" IconName="@IconNames.Home" Uri="dashboard" />
            <LgMenuItem Text="#Orders" IconName="@IconNames.All.Cart3" Uri="orders" />
        </LgMenuSet>

        <LgMenuSet Id="admin-menu">
            <LgMenuItem Text="#Users" IconName="@IconNames.All.PeopleFill" Uri="admin/users" />
            <LgMenuItem Text="#Roles" IconName="@IconNames.All.ShieldLockFill" Uri="admin/roles" />
        </LgMenuSet>

        <LgMenuSet Id="toolbar-menu">
            <LgMenuItem Text="#Settings" IconName="@IconNames.Admin" Uri="settings" />
            <LgMenuItem Text="#Help" IconName="@IconNames.Question" Uri="help" />
        </LgMenuSet>
    </MenuSetDeclarations>

    <Menu>
        <LgIncludeMenuSet Id="common-menu" />

        <AuthorizeView Policy="Administration">
            <Authorized>
                <LgMenuItem Text="#Administration" IconName="@IconNames.Admin" AutoHide="true">
                    <LgIncludeMenuSet Id="admin-menu" />
                </LgMenuItem>
            </Authorized>
        </AuthorizeView>

        @if (App.WindowInformation.MediaType == MediaType.Mobile)
        {
            <LgIncludeMenuSet Id="toolbar-menu" />
        }
    </Menu>

    <Toolbar>
        @if (App.WindowInformation.MediaType == MediaType.Desktop)
        {
            <LgIncludeMenuSet Id="toolbar-menu" />
        }
    </Toolbar>
</LgMenuConfiguration>

Rafraîchir un menu dynamique

Quand la composition dépend d'un état calculé côté client, injectez MenuService dans le code-behind du composant de menu et appelez Refresh ou RefreshAll après modification de cet état.

MenuConfiguration.razor

<LgMenuConfiguration>
    <Menu>
        <LgMenuItem Text="#Support" IconName="@IconNames.Question" AutoHide="true">
            @if (_showSupportLinks)
            {
                <LgMenuItem Text="#Documentation" Uri="help/documentation" />
                <LgMenuItem Text="#ContactSupport" Uri="help/contact" />
            }
        </LgMenuItem>
    </Menu>

    <Toolbar>
        <LgMenuItem Text="#ToggleSupport" IconName="@IconNames.Question" OnClick="ToggleSupportLinksAsync" />
    </Toolbar>
</LgMenuConfiguration>

MenuConfiguration.razor.cs

public partial class MenuConfiguration : LgComponentBase
{
    // Mémorise l'affichage des liens support ; utile pour reconstruire les fragments de menu à la demande.
    private bool _showSupportLinks = true;

    [Inject]
    private MenuService MenuService { get; set; }

    // Inverse l'état visible puis force Lagoon à relire les zones de menu concernées.
    private Task ToggleSupportLinksAsync(ActionEventArgs args)
    {
        _showSupportLinks = !_showSupportLinks;
        MenuService.Refresh(MenuPosition.MenuTop | MenuPosition.MenuToolbar);
        return Task.CompletedTask;
    }
}

Propriétés

Toutes les propriétés [Parameter] de LgMenuConfiguration.

Nom	Type	Défaut	Déclaré dans	Description
MenuSetDeclarations	RenderFragment	null	LgMenuConfiguration	Déclare les ensembles de menu réutilisables (LgMenuSet) identifiés par Id.
Menu	RenderFragment	null	LgMenuConfiguration	Contenu du menu principal, généralement affiché dans le header ou la barre de navigation haute.
Sidebar	RenderFragment	null	LgMenuConfiguration	Contenu du menu latéral.
Toolbar	RenderFragment	null	LgMenuConfiguration	Contenu de la barre d'outils principale de l'application.
TabContainerToolbar	RenderFragment	null	LgMenuConfiguration	Contenu de la barre d'outils intégrée au conteneur d'onglets applicatif.

Composants réutilisables associés

LgMenuSet

LgMenuSet déclare un groupe d'entrées de menu réutilisable dans MenuSetDeclarations.

Nom	Type	Défaut	Déclaré dans	Description
ChildContent	RenderFragment	null	LgMenuSet	Contenu du groupe réutilisable.
Id	string	null	LgCustomMenuSet	Identifiant unique du groupe. Obligatoire ; un doublon provoque une erreur à l'initialisation.

LgIncludeMenuSet

LgIncludeMenuSet insère un groupe déclaré au préalable par LgMenuSet.

Nom	Type	Défaut	Déclaré dans	Description
Id	string	null	LgIncludeMenuSet	Identifiant du LgMenuSet à inclure.

Accessibilité

• Gardez un Text traduit sur les LgMenuItem importants, même lorsque l'icône est présente.
• Si le texte racine est masqué dans certains rendus, prévoyez un tooltip ou un libellé équivalent sur les items concernés.
• Structurez la sidebar avec LgMenuTitle et LgMenuSeparator pour rendre les groupes plus lisibles.

Composants liés

• LgMenuItem — entrée cliquable du menu.
• LgMenuTitle — titre de section pour la sidebar.
• LgMenuSeparator — séparateur visuel entre groupes.
• LgTabContainer — peut consommer TabContainerToolbar.