Added in v1.7

Blazorise RouterTabs component

Automatically create tabs for each page the user navigates to.

RouterTabs is a Blazorise extension that allows you to render a tab for each navigation page. This extension is useful when you want to create a tabbed interface for your application.

To use the RouterTabs component, install the Blazorise.Components package first.

Installation

The RouterTabs extension is part of the Blazorise.Components NuGet package.

NuGet

Install extension from NuGet.

Install-Package Blazorise.Components

Imports

In your main _Imports.razor add:

@using Blazorise.Components

Configuration

Register services

Incorporate RouterTabs services by adding the following code to the relevant sections of Program.cs.

using Blazorise.Components;

builder.Services
	.AddBlazorise()
	.AddBlazoriseRouterTabs();

Provide route data

Cascade the required routeData so RouterTabs can capture it.

<Router AppAssembly="typeof(App).Assembly">
        <Found Context="routeData">
        <CascadingValue Value="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
        </CascadingValue>
        </Found>
        <NotFound>
        <p>Sorry, there's nothing at this address.</p>
        </NotFound>
</Router>

Configure the layout

Replace the Layout @Body RenderFragment with the RouterTabs component. RouterTabs will handle the page content rendering for you when the page that makes use of this layout is navigated to.

@inherits LayoutComponentBase

<Div Class="layout">
        <RouterTabs />
</Div>

Configure pages as tabs

Use RouterTabsPageAttribute to configure how your pages will behave when rendered as tabs.

@attribute [RouterTabsPageAttribute( Name: "Example", Closeable: true )]

Basic example

This page uses a custom layout with the RouterTabs component, try navigating between these pages, tabs will be created for each one of the navigations.

API

RouterTabsPageAttribute

Name	Description	Type	Default
`Name`	Sets the name of the router tab.	`string`
`TabClass`	Sets the css class of the router tab.	`string`
`TabPanelClass`	Sets the css class of the router tab panel.	`string`
`Closeable`	Whether the router tab is closeable.	`bool`	`true`