BlazorXTabs 1.5.2

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

Install-Package BlazorXTabs -Version 1.5.2
dotnet add package BlazorXTabs --version 1.5.2
<PackageReference Include="BlazorXTabs" Version="1.5.2" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlazorXTabs --version 1.5.2
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: BlazorXTabs, 1.5.2"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install BlazorXTabs as a Cake Addin
#addin nuget:?package=BlazorXTabs&version=1.5.2

// Install BlazorXTabs as a Cake Tool
#tool nuget:?package=BlazorXTabs&version=1.5.2
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

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.

Examples:

Standard usage:
<XTabs>
    <XTab Title="Tab1">
        Content 1
    </XTab>
    <XTab Title="Tab2">
        Content 2
    </XTab>
</XTabs>
Using the XTabsRouteView to render pages as tabs:
<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <XTabsRouteView CloseTabs="true" NewTabSetActive="true" 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" />

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.

Examples:

Standard usage:
<XTabs>
    <XTab Title="Tab1">
        Content 1
    </XTab>
    <XTab Title="Tab2">
        Content 2
    </XTab>
</XTabs>
Using the XTabsRouteView to render pages as tabs:
<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <XTabsRouteView CloseTabs="true" NewTabSetActive="true" 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" />

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
1.5.2 30 4/24/2021
1.5.1 80 3/8/2021
1.5.0 65 2/14/2021
1.4.2 39 2/9/2021
1.4.1 36 2/9/2021
1.4.0 48 2/2/2021
1.3.0 160 12/8/2020
1.2.0 119 12/8/2020
1.1.0 152 11/15/2020
1.0.1 385 11/14/2020
1.0.0 443 11/14/2020