Aller au contenu principal

Configuration du menu

La configuration du menu se fait dans un composant dédié du projet Client, généralement Shared/MenuConfiguration.razor. Ce composant est référencé par App.razor dans le ChildContent de LgApp.

Déclarez directement les éléments dans les fragments Menu, Sidebar, Toolbar et TabContainerToolbar de LgMenuConfiguration.

MenuConfiguration.razor
@inherits LgComponentBase

<LgMenuConfiguration>
    <Menu>
        <LgMenuItem Link="HomePage.Link()" />
        <LgMenuItem Text="#menuCatalog" Link="CatalogPage.Link()" />
    </Menu>
    <Sidebar>
        <LgMenuItem Link="SidePage.Link()" />
    </Sidebar>
    <Toolbar>
        <LgDebugMenuItem />
        <LgAboutMenuItem />
        <LgConnectMenuItem />
    </Toolbar>
</LgMenuConfiguration>
Menus techniques

LgDebugMenuItem est destiné aux configurations de développement. Il donne accès au rechargement du style, à la page des icônes et aux logs de l'application.

Groupes de menu​

Pour une configuration plus complexe, déclarez des groupes réutilisables dans MenuSetDeclarations, puis insérez-les dans les zones du layout avec LgIncludeMenuSet.

MenuConfiguration.razor
@inherits LgComponentBase

<LgMenuConfiguration>
    <MenuSetDeclarations>
        <LgMenuSet Id="grpCommon">
            <LgMenuItem Text="#menuHome" IconName="@IconNames.Home" Uri="/" />
            <LgMenuItem Link="CardListUsagePage.Link()" />
            <LgMenuItem Link="CounterPage.Link()" />
            <LgMenuItem Text="#menuFetchData" IconName="@IconNames.All.UiChecks" Uri="fetchdata" />
            <LgMenuItem Text="#menuCsv" IconName="@IconNames.All.UiChecks" Uri="CSV" />
        </LgMenuSet>

        <LgMenuSet Id="grpAdmin">
            <LgMenuItem IconName="@IconNames.All.GearFill" AutoHide="true">
                <LgMenuItem Text="#menuUser" IconName="@IconNames.All.PersonPlusFill">
                    <LgMenuItem Text="#menuUserList" IconName="@IconNames.Home" />
                    <LgMenuItem Text="#menuUserAdd" IconName="@IconNames.All.Wrench" />
                </LgMenuItem>
                <LgMenuItem Text="#menuLogs" IconName="@IconNames.All.CardList" />
            </LgMenuItem>
        </LgMenuSet>

        <LgMenuSet Id="grpCommonToolbar">
            <LgMenuItem Text="#menuLanguage">
                <LgMenuItem OnClick="SetFrenchAsync" Text="#languageFrench" />
                <LgMenuItem OnClick="SetEnglishAsync" Text="#languageEnglish" />
            </LgMenuItem>
            <LgMenuItem IconName="@IconNames.All.KeyFill" Uri="lgredirect/logout" Text="#disconnect" />
        </LgMenuSet>
    </MenuSetDeclarations>

    <Menu>
        <LgIncludeMenuSet Id="grpCommon" />
        <AuthorizeView Policy="@AppPolicies.ContentEditor">
            <LgIncludeMenuSet Id="grpAdmin" />
        </AuthorizeView>
        @if (App.WindowInformation.MediaType != MediaType.Desktop)
        {
            <LgIncludeMenuSet Id="grpCommonToolbar" />
        }
    </Menu>

    <Toolbar>
        @if (App.WindowInformation.MediaType == MediaType.Desktop)
        {
            <LgIncludeMenuSet Id="grpCommonToolbar" />
        }
    </Toolbar>
</LgMenuConfiguration>
MenuConfiguration.razor.cs
public partial class MenuConfiguration : LgComponentBase
{
    private Task SetFrenchAsync(ActionEventArgs args)
    {
        // Change la langue côté client et synchronise les futures requêtes serveur.
        App.SetLanguage("fr-FR");
        return Task.CompletedTask;
    }

    private Task SetEnglishAsync(ActionEventArgs args)
    {
        // Change la langue côté client et synchronise les futures requêtes serveur.
        App.SetLanguage("en-US");
        return Task.CompletedTask;
    }
}

Dans cet exemple, grpCommon est toujours présent, grpAdmin est rendu seulement si la policy est satisfaite, et grpCommonToolbar passe de la toolbar au menu principal selon le type d'affichage.

Niveaux et composition​

Les sous-niveaux se déclarent par imbrication de LgMenuItem. Le menu principal supporte jusqu'à trois niveaux. La sidebar supporte jusqu'à deux niveaux. Lorsque Scrollable est activé sur un élément, n'ajoutez pas de troisième niveau dans cette liste déroulante.

Liens typés vers les pages​

Préférez toujours le paramètre Link à une URI écrite en dur. La page expose une méthode statique Link() qui centralise la route, le titre traduit et l'icône.

CounterPage.razor.cs
[Route(ROUTE)]
public partial class CounterPage : LgPage
{
    private const string ROUTE = "counter";

    public static LgPageLink Link()
    {
        return LgPageLink.Create(ROUTE, "#menuCounter", IconNames.All.CalculatorFill);
    }
}
MenuConfiguration.razor
<LgMenuItem Link="CounterPage.Link()" />

Éléments préexistants​

ÉlémentUsage
LgMenuTitleAjoute un titre textuel dans un menu.
LgMenuSeparatorAjoute un séparateur.
LgNavigationBox<TPageLink>Ajoute une zone de recherche de navigation.
LgAboutMenuItemOuvre la modale À propos.
LgDebugMenuItemAjoute les entrées de diagnostic utiles en développement.

Paramètres courants de LgMenuItem​

ParamètreRôle
OnClickAction exécutée au clic. Ne se combine pas avec une navigation par Uri.
AutoHideMasque automatiquement un sous-menu vide, par exemple après filtrage par AuthorizeView.
CustomContentPersonnalise le rendu de l'élément. Ne se combine pas avec Text.
IconNameNom de l'icône affichée.
LinkLien typé produit par une page Lagoon.
ModalOuvre l'URI dans une modale de taille donnée.
ScrollableActive le scroll dans la liste déroulante.
TargetNom de la fenêtre de navigateur cible.
TextLibellé affiché, traduisible avec #.
UriChemin à ouvrir.
HideRootLevelTextForce l'affichage ou le masquage du texte au niveau racine, notamment dans la toolbar.
Visibilité par droits

LgMenuItem et LgMenuSet n'ont pas de paramètre PolicyVisible. Utilisez AuthorizeView autour des items ou des groupes. PolicyVisible existe sur LgStartupTab.

Voir aussi​