zanderzhg / BlazorXTabs

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

BlazorXTabs

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

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" />