Skip to main content

Layout Definition

The layout structures the pages of the Lagoon client application. It is defined in the Client project, typically with two components placed in Shared: App.razor for the application structure and MenuConfiguration.razor for the menus.

Root file

App.razor is the root component registered in Client/Main.cs with builder.RootComponents.Add<Shared.App>("#app").

Minimal structure​

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 is placed in ChildContent so that the layout has the menu elements to render in the declared areas.

Areas controlled by LgApp​

ParameterRole
DefaultLayoutBlazor layout type used by default when a page does not declare one.
IsTabbedEnables application tab navigation mode.
ShowHeaderDisplays the top header with the logo and main menu.
ShowFooterDisplays the bottom footer. Its content is customizable with FooterContent.
ShowSidebarDisplays a sidebar on the left of the application.
Toolbar

The header toolbar is configured in MenuConfiguration.razor via the Toolbar fragment.

Tabs open at startup​

Add multiple LgStartupTab components to open multiple pages when the application starts.

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 accepts notably Link, Default, Closable, and PolicyVisible. Use PolicyVisible to open a startup tab only if the requested policy is satisfied.

The footer is rendered only when ShowFooter is true.

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

<LgLabel Text="#footerCopyright" />

See also​