Aller au contenu principal

Définition du layout

Le layout structure les pages de l'application cliente Lagoon. Il est défini dans le projet Client, généralement avec deux composants placés dans Shared : App.razor pour la structure applicative et MenuConfiguration.razor pour les menus.

Fichier racine

App.razor est le composant racine enregistré dans Client/Main.cs avec builder.RootComponents.Add<Shared.App>("#app").

Structure minimale​

App.razor
<LgApp DefaultLayout="typeof(MainLayout)"
       IsTabbed="true"
       ShowHeader="true"
       ShowSidebar="false"
       ShowFooter="true">
    <StartupTabs>
        <LgStartupTab Link="Demo.Client.Pages.Index.Link()" />
    </StartupTabs>
    <FooterContent>
        <MyFooterComponent />
    </FooterContent>
    <ChildContent>
        <MenuConfiguration />
    </ChildContent>
</LgApp>

MenuConfiguration est placé dans ChildContent afin que le layout dispose des éléments de menu à rendre dans les zones déclarées.

Zones pilotées par LgApp​

ParamètreRôle
DefaultLayoutType de layout Blazor utilisé par défaut lorsqu'une page n'en déclare pas.
IsTabbedActive le mode de navigation par onglets applicatifs.
ShowHeaderAffiche le header supérieur avec le logo et le menu principal.
ShowFooterAffiche le footer inférieur. Son contenu est personnalisable avec FooterContent.
ShowSidebarAffiche une sidebar à gauche de l'application.
Toolbar

La toolbar du header se configure dans MenuConfiguration.razor via le fragment Toolbar.

Onglets ouverts au démarrage​

Ajoutez plusieurs LgStartupTab pour ouvrir plusieurs pages au lancement de l'application.

App.razor
<LgApp IsTabbed="true" ShowHeader="true">
    <StartupTabs>
        <LgStartupTab Link="HomePage.Link()" Default="true" />
        <LgStartupTab Link="DashboardPage.Link()" Closable="true" />
    </StartupTabs>
    <ChildContent>
        <MenuConfiguration />
    </ChildContent>
</LgApp>

LgStartupTab accepte notamment Link, Default, Closable et PolicyVisible. Utilisez PolicyVisible pour ouvrir un onglet de démarrage uniquement si la policy demandée est satisfaite.

Le footer est rendu uniquement lorsque ShowFooter vaut true.

App.razor
<LgApp ShowFooter="true">
    <FooterContent>
        <MyFooterComponent />
    </FooterContent>
    <ChildContent>
        <MenuConfiguration />
    </ChildContent>
</LgApp>
MyFooterComponent.razor
@inherits LgComponentBase

<LgLabel Text="#footerCopyright" />

Voir aussi​