/BlazorXTabs

BlazorXTabs is an extended tabs component library providing various tab features for Blazor!

Primary LanguageC#MIT LicenseMIT

BlazorXTabs

An extended tabs component library providing various tab features for Blazor!

GitHub tag (latest SemVer) NuGet Nuget MIT

Screenshot of sample Checkout all the examples at: BlazorXTabs Demo

Main Features:

  • Close tabs
  • Navigate to page and render it as a tab
  • Tabs won't duplicate when navigating to the same page
  • Use XTabs classes to further customize the look
  • Keep tabs state when switching between tabs
  • Bind to events: Selected / Changed / Removed
  • v1.2.0
    • Setup wizard like tabs with events: Previous / Next and customizable previous/next buttons
    • Possibility to set the active tab to Loading
  • v1.3.0
    • Able to drag & drop tabs
  • v1.4.0
    • Able to replace the standard RouteView component with a XTabsRouteView component that automatically renders the pages as tabs
  • v1.5.0
    • When CloseTabs is enabled. Able to close all tabs and configure a threshold to display the close all tabs button.
    • When CloseTabs is enabled. Able to use mouse middle button click to close the tab.
    • When CloseTabs is enabled. Able to limit closeable tabs to 1.
  • v1.6.0
    • Fixed RenderMode.Partial duplicating tabs
    • Introduced XTabsAuthorizeRouteView to allow tabs integration with Authentication
  • v1.7.0
    • NET6 Support
  • v1.8.0
    • NET7 Support
  • v1.9.0
    • Introduced NavigationMode, this is a XTabsRouteView only setting.
      • NavigationMode.Standard : This is the default and XTabs will work as it always did. Clicking a Page Tab will set it as active.
      • NavigationMode.Navigable : This new setting will make it so that whenever a Page Tab is set to active, it additionally triggers navigation. This is usefull to sync the browser url to the currently active Page Tab.
  • v2.0.0
    • NET8 Support

Examples:

Standard usage:

<XTabs>
    <XTab Title="Tab1">
        Content 1
    </XTab>
    <XTab Title="Tab2">
        Content 2
    </XTab>
</XTabs>

Using the XTabsRouteView or XTabsAuthorizeRouteView to render pages as tabs:

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <XTabsRouteView CloseTabs="true" NewTabSetActive="true" 
        NavigationMode="BlazorXTabs.Configuration.NavigationMode.Navigable"
        RenderMode="BlazorXTabs.Configuration.RenderMode.Full" 
        RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>
Use the XTabPageAttribute to set the page's tab title & other relevant parameters
 @attribute [XTabPageAttribute("Home")]

Using as a wizard:

    <XTab Title="Steps example">
        <XTabs RenderMode="BlazorXTabs.Configuration.RenderMode.Steps">
            <XTab Title="Step1">
                   This is step 1!
            </XTab>
            <XTab Title="Step2">
                This is step 2!
            </XTab>
            <XTab Title="Step3">
                This is the last step. Step 3!
            </XTab>
        </XTabs>
    </XTab>

Drag&Drop:

    <XTab Title="Drag Example">
        <XTabs IsDraggable="true" RenderMode="BlazorXTabs.Configuration.RenderMode.Partial" >
                <XTab Title="1. I can be dragged!!">
                    <p>I can be dragged!!</p>
                </XTab>
                <XTab Title="2. Drag me!">
                    <p>Drag me!</p>
                </XTab>
                <XTab Title="3. Please drag me!! I hate being last place!">
                    <p>Please drag me!! I hate being last place!</p>
                </XTab>
        </XTabs>
    </XTab>

Setup:

  • You can install the package via the nuget package manager just search for BlazorXTabs. You can also install via powershell using the following command.
Install-Package BlazorXTabs
  • Or via the dotnet CLI.
dotnet add package BlazorXTabs
  • If you'd like to bring in XTabs default styling, don't forget to add:
<link href="{YOUR-PROJECT-NAME}.styles.css" rel="stylesheet" />