Skip to main content

Tabbed display mode

Lagoon can display pages in simple page mode or in application tabbed mode. Tabbed mode is enabled in App.razor with IsTabbed="true".

Enable tabbed mode​

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

Home page​

The home page is defined by its root route.

HomePage.razor
@inherits LgPage
HomePage.razor.cs
[Route(ROUTE)]
public partial class HomePage : LgPage
{
    private const string ROUTE = "/";

    public static LgPageLink Link()
    {
        return LgPageLink.Create(ROUTE, "#homeTitle", IconNames.Home);
    }
}

Tab title and icon​

For a Lagoon page, centralize the title and icon in the static Link() method.

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);
    }
}

The tab then retrieves the translated title and icon via the typed link.

Open a tab​

A link to a route corresponding to an existing page automatically opens the associated tab. In code, use Lagoon navigation rather than a hard-coded URL.

MyComponent.razor.cs
public partial class MyComponent : LgComponentBase
{
    private void OpenCounter()
    {
        // Opens the target page in the application's current navigation mode.
        App.NavigateTo(CounterPage.Link().Uri);
    }
}

Tabs open at startup​

StartupTabs lets you declare pages that open automatically at startup.

App.razor
<LgApp DefaultLayout="typeof(MainLayout)" IsTabbed="true" ShowHeader="true" ShowSidebar="false">
    <StartupTabs>
        <LgStartupTab Link="Demo.Client.Pages.Index.Link()" Default="true" />
        <LgStartupTab Link="DashboardPage.Link()" Closable="true" PolicyVisible="DashboardReader" />
    </StartupTabs>
    <ChildContent>
        <MenuConfiguration />
    </ChildContent>
</LgApp>

Reload the active tab​

The reload behavior when clicking the active tab is controlled by TabReloadDisabled in OnConfigureBehavior.

Main.cs
public class Main : LgCustomApplication
{
    protected override void OnConfigureBehavior(ApplicationBehavior app)
    {
        // Disables content reload when the user clicks the active tab again.
        app.TabReloadDisabled = true;
    }
}

Save open tabs​

By default, tabs are not saved. TabSavingMethod enables:

ValueEffect
TabSavingMethod.NoneDoes not save tabs.
TabSavingMethod.LocalSaves tabs in the browser via IndexedDB.
TabSavingMethod.RemoteSaves tabs in the server database.
Main.cs
public class Main : LgCustomApplication
{
    protected override void OnConfigureBehavior(ApplicationBehavior app)
    {
        // Restores tabs after refresh or reconnection.
        app.TabSavingMethod = TabSavingMethod.Remote;
    }
}

Close all tabs​

TryCloseAllTabs() attempts to close all open tabs.

TabsActions.razor
@inherits LgComponentBase

<LgButton Text="#closeAllTabs" OnClick="CloseAllTabsAsync" />
TabsActions.razor.cs
public partial class TabsActions : LgComponentBase
{
    private Task CloseAllTabsAsync(ActionEventArgs args)
    {
        // Tabs that refuse to close can display their confirmation dialog.
        App.TryCloseAllTabs();
        return Task.CompletedTask;
    }
}

See also​