Enterprise-level component library based on Bootstrap and Blazor

Tabs

A collection of data that is associated with the separation content but belongs to a different category.

Tab components are designed in the form of templates, and this component is used by adding TabItem subcomponents to the tabItems in the template

Tips

Tab components are generally used in two ways:

Split as data
Page navigation

The default behavior of this component is data segmentation,Clicking on the TabItem title does not navigate, and if you need to navigate the address bar, set the ClickTabToNavigation property to true，When you click on the TabItem title, the address bar redirects navigation, mostly for the background management system to be used in conjunction with the Menu components，The actual combat can refer to the multi-label mode in the background template simulator, When you have Razor Component in the additional Assemblies, set the AdditionalAssemblies property value correctly so that the route within the label component is resolved correctly, and the relevant documentation [Portal]

This component adapts to width height, etc., and scroll arrows can appear left and right or up and down when appropriate

Set additional information during tab navigation

Tab properties can be set when navigating using the built-in extension method Navigator.NavigateTo("provider", "url", "text", "icon", "closable")
Setting @attribute [TabItemOption(Text = "LayoutPage", Icon = "fa-solid fa-font-awesome")] in razor page

Q&A

Get TabSet by cascading parameter
Get TabItem by cascading parameter

[CascadingParameter]
[NotNull]
public Tab? TabSet { get; set; }

[CascadingParameter]
[NotNull]
public TabItem? TabItem { get; set; }

Basic usage

Basic, concise tabs.

Demo

User Menu Roles Department

I am a user manager

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Tabs> Localizer

<Tab>
    <TabItem Text="@Localizer["TabItem1Text"]">
        <div>@Localizer["TabItem1Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem2Text"]">
        <div>@Localizer["TabItem2Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem3Text"]">
        <div>@Localizer["TabItem3Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem4Text"]">
        <div>@Localizer["TabItem4Content"]</div>
    </TabItem>
</Tab>

Tab style

Set tab-style tabs by isCard='true'.

Demo

User Menu Roles Department

I am a user manager

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Tabs> Localizer

<Tab IsCard="true">
    <TabItem Text="@Localizer["TabItem1Text"]">
        <div>@Localizer["TabItem1Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem2Text"]">
        <div>@Localizer["TabItem2Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem3Text"]">
        <div>@Localizer["TabItem3Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem4Text"]">
        <div>@Localizer["TabItem4Content"]</div>
    </TabItem>
</Tab>

Carding

Set tab-style tabs by IsBorderCard='true'.

Demo

User Menu Roles Department

I am a user manager

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Tabs> Localizer

<Tab IsBorderCard="true">
    <TabItem Text="@Localizer["TabItem1Text"]">
        <div>@Localizer["TabItem1Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem2Text"]">
        <div>@Localizer["TabItem2Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem3Text"]">
        <div>@Localizer["TabItem3Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem4Text"]">
        <div>@Localizer["TabItem4Content"]</div>
    </TabItem>
</Tab>

Icon

Set the tab icon by setting the Icon property of the TabItem component

Demo

User Menu Roles Department

I am a user manager

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Tabs> Localizer

<Tab IsCard="true">
    <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user">
        <div>@Localizer["TabItem1Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem2Text"]" Icon="fa-solid fa-gauge-high">
        <div>@Localizer["TabItem2Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem3Text"]" Icon="fa-solid fa-sitemap">
        <div>@Localizer["TabItem3Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem4Text"]" Icon="fa-solid fa-building-columns">
        <div>@Localizer["TabItem4Content"]</div>
    </TabItem>
</Tab>

Show the close button to the tab by setting the ShowClose property

Demo

Tips

Tab component turns on the showClose , TabItem property Closable can be set individually to close tab, defaulting to true;In this example UserTabs do not provide a to turn off functionality

User Menu Roles Department

I am a user manager

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Tabs> Localizer

<Tab IsCard="true" ShowClose="true">
    <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa-solid fa-user" Closable="false">
        <div>@Localizer["TabItem1Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem2Text"]" Icon="fa-solid fa-gauge-high">
        <div>@Localizer["TabItem2Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem3Text"]" Icon="fa-solid fa-sitemap">
        <div>@Localizer["TabItem3Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem4Text"]" Icon="fa-solid fa-building-columns">
        <div>@Localizer["TabItem4Content"]</div>
    </TabItem>
</Tab>

Position

By setting the Placement property to change the label position, a small arrow scrolls up and down to TabItem switch when you change to left or right

Demo

User Menu Roles System logs Sign log Timed task

I am a user manager

Split Line

User Menu Roles System logs Sign log Timed task

I am a user manager

Split Line

User Menu Roles System logs Sign log Timed task

I am a user manager

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Tabs> Localizer

<p class="text-center">
    <div class="btn-group">
        <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Top)">Top</button>
        <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Right)">Right</button>
        <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Bottom)">Bottom</button>
        <button class="btn btn-primary" @onclick="e => SetPlacement(Placement.Left)">Left</button>
    </div>
</p>
<Tab Placement="@BindPlacement" Height="200">
    <TabItem Text="@Localizer["TabItem1Text"]">
        <div>@Localizer["TabItem1Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem2Text"]">
        <div>@Localizer["TabItem2Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem3Text"]">
        <div>@Localizer["TabItem3Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem5Text"]">
        <div>@Localizer["TabItem5Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem6Text"]">
        <div>@Localizer["TabItem6Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem7Text"]">
        <div>@Localizer["TabItem7Content"]</div>
    </TabItem>
</Tab>
<Divider Text="@Localizer["DividerText"]"></Divider>
<Tab Placement="@BindPlacement" IsCard="true" Height="200">
    <TabItem Text="@Localizer["TabItem1Text"]">
        <div>@Localizer["TabItem1Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem2Text"]">
        <div>@Localizer["TabItem2Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem3Text"]">
        <div>@Localizer["TabItem3Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem5Text"]">
        <div>@Localizer["TabItem5Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem6Text"]">
        <div>@Localizer["TabItem6Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem7Text"]">
        <div>@Localizer["TabItem7Content"]</div>
    </TabItem>
</Tab>
<Divider Text="@Localizer["DividerText"]"></Divider>
<Tab Placement="@BindPlacement" IsBorderCard="true" Height="200">
    <TabItem Text="@Localizer["TabItem1Text"]">
        <div>@Localizer["TabItem1Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem2Text"]">
        <div>@Localizer["TabItem2Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem3Text"]">
        <div>@Localizer["TabItem3Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem5Text"]">
        <div>@Localizer["TabItem5Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem6Text"]">
        <div>@Localizer["TabItem6Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem7Text"]">
        <div>@Localizer["TabItem7Content"]</div>
    </TabItem>
</Tab>

@code {
    private Placement BindPlacement = Placement.Top;

    private void SetPlacement(Placement placement)
    {
        BindPlacement = placement;
    }
}

Custom add tab triggers

Dynamically add/remove TabItem by calling the component api

Demo

User Menu Roles Department Timed task

I am a user manager

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Tabs> Localizer

<p>
    <Button Icon="fa-solid fa-circle-plus" OnClickWithoutRender="@(() => AddTab(TabSet))" Text="@Localizer["AddButtonText"]">
    </Button>
    <Button Color="Color.Danger" Icon="fa-solid fa-circle-minus" IsDisabled="@RemoveEndable" OnClickWithoutRender="@(() => RemoveTab(TabSet))" Text="@Localizer["RmoveButtonText"]">
    </Button>
    <Button Icon="fa-solid fa-font-awesome" OnClickWithoutRender="@(() => Active(TabSet))" Text="@Localizer["ActiveButtonText"]">
    </Button>
</p>
<Tab IsBorderCard="true" @ref="TabSet">
    <TabItem Text="@Localizer["TabItem1Text"]">
        <div>@Localizer["TabItem1Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem2Text"]">
        <div>@Localizer["TabItem2Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem3Text"]">
        <div>@Localizer["TabItem3Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem4Text"]">
        <div>@Localizer["TabItem4Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem7Text"]">
        <div>@Localizer["TabItem7Content"]</div>
    </TabItem>
</Tab>

@code {
    [NotNull]
    private Tab? TabSet { get; set; }

    private Task AddTab(Tab tabset)
    {
        var text = $"Tab {tabset.Items.Count() + 1}";
        tabset.AddTab(new Dictionary<string, object?>
        {
            [nameof(TabItem.Text)] = text,
            [nameof(TabItem.IsActive)] = true,
            [nameof(TabItem.ChildContent)] = new RenderFragment(builder =>
            {
                var index = 0;
                builder.OpenElement(index++, "div");
                builder.AddContent(index++, Localizer["BackAddTabText", text]);
                builder.CloseElement();
            })
        });
        return Task.CompletedTask;
    }

    private static Task Active(Tab tabset)
    {
        tabset.ActiveTab(0);
        return Task.CompletedTask;
    }

    private bool RemoveEndable => (TabSet?.Items.Count() ?? 4) < 4;

    private static async Task RemoveTab(Tab tabset)
    {
        if (tabset.Items.Count() > 4)
        {
            var item = tabset.Items.Last();
            await tabset.RemoveTab(item);
        }
    }
}

Additional components are built in

other components are built into the TabItem

Demo

Tab The contents of each panel of the component remain state by default, and in this case the original data is maintained when the panel switches

Count Weather forecast

Counter

Current count: 0

Weather forecast

This component demonstrates fetching data from a service.

Date	Temp. (C)	Temp. (F)	Summary
3/23/2023	-8	18	Chilly
3/24/2023	44	111	Warm
3/25/2023	2	35	Chilly
3/26/2023	44	111	Sweltering
3/27/2023	40	103	Bracing

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Tabs> Localizer

<Tab IsBorderCard="true">
    <TabItem Text="@Localizer["TabItem8Text"]">
        <Counter></Counter>
    </TabItem>
    <TabItem Text="@Localizer["TabItem9Text"]">
        <FetchData></FetchData>
    </TabItem>
</Tab>

The program dynamically adds the TabItem panel

This feature allows you to click on the menu link in the sidebar and render multiple labels at the top of the data area on the right

Demo

In this example, the right the Tab the inside of the panel remains in state, and the component reloads when it is closed and reopened

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Tabs> Localizer

<Layout SideWidth="120px" style="min-height: 180px; border: 1px solid #ddd; border-radius: 4px;">
    <Header>
        <div class="header">@Localizer["Block9Div"]</div>
    </Header>
    <Side>
        <div style="border-right: 1px solid #e6e6e6; height: 100%; overflow: auto; padding: 1rem 0; background-color: #f8f9fa;">
            <Menu Items="@GetSideMenuItems()" IsVertical="true" OnClick="@OnClickMenuItem" @ref="TabMenu" />
        </div>
    </Side>
    <Main>
        <div class="tab-main-demo">
            <Tab @ref="TabSetMenu" ShowClose="true">
            </Tab>
        </div>
    </Main>
</Layout>

@code {
    [NotNull]
    private Menu? TabMenu { get; set; }

    [NotNull]
    private Tab? TabSetMenu { get; set; }

    /// <summary>
    /// OnAfterRenderAsync
    /// </summary>
    /// <param name="firstRender"></param>
    /// <returns></returns>
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var menuItem = TabMenu?.Items.FirstOrDefault();
            if (menuItem != null)
            {
                await InvokeAsync(() =>
                {
                    var _ = TabMenu?.OnClick?.Invoke(menuItem);
                });
            }
        }
    }

    private IEnumerable<MenuItem> GetSideMenuItems()
    {
        return new List<MenuItem>
        {
            new MenuItem() { Text = Localizer["BackText1"]  },
            new MenuItem() { Text = Localizer["BackText2"] }
        };
    }

    private Task OnClickMenuItem(MenuItem item)
    {
        var text = item.Text;
        var tabItem = TabSetMenu.Items.FirstOrDefault(i => i.Text == text);
        if (tabItem == null) AddTabItem(text ?? "");
        else TabSetMenu.ActiveTab(tabItem);
        return Task.CompletedTask;
    }

    private void AddTabItem(string text) => TabSetMenu.AddTab(new Dictionary<string, object?>
    {
        [nameof(TabItem.Text)] = text,
        [nameof(TabItem.IsActive)] = true,
        [nameof(TabItem.ChildContent)] = text == Localizer["BackText1"] ? BootstrapDynamicComponent.CreateComponent<Counter>().Render() : BootstrapDynamicComponent.CreateComponent<FetchData>().Render()
    });
}

Live Tab components

By setting the ShowExtendButtons property to true, turning on the left and right buttons of the component and closing the drop-down menu, it is very useful in practice

Demo

Tips

Dynamically adjust the number of TabItem by adding, deletebuttons to view the left and right effects beyond the number of containers, user management is set to not close, and the feature button cannot close this tab

User Menu Roles Department Timed task

I am a user manager

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Tabs> Localizer

<p>
    <button type="button" class="btn btn-outline-primary" @onclick="@(e => AddTab(TabSet2))">
        <i class="fa-solid fa-circle-plus"></i>
        <span>@Localizer["AddButtonText"]</span>
    </button>
    <button type="button" class="btn btn-outline-danger" disabled="@((TabSet2?.Items.Count() > 4) ? null : "true")" @onclick="@(e => RemoveTab(TabSet2!))">
        <i class="fa-solid fa-circle-minus"></i>
        <span>@Localizer["RmoveButtonText"]</span>
    </button>
</p>
<Tab ShowExtendButtons="true" ShowClose="true" @ref="TabSet2">
    <TabItem Text="@Localizer["TabItem1Text"]" Closable="false">
        <div>@Localizer["TabItem1Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem2Text"]">
        <div>@Localizer["TabItem2Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem3Text"]">
        <div>@Localizer["TabItem3Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem4Text"]">
        <div>@Localizer["TabItem4Content"]</div>
    </TabItem>
    <TabItem Text="@Localizer["TabItem7Text"]">
        <div>@Localizer["TabItem7Content"]</div>
    </TabItem>
</Tab>

@code {
    [NotNull]
    private Tab? TabSet2 { get; set; }

    private static async Task RemoveTab(Tab tabset)
    {
        if (tabset.Items.Count() > 4)
        {
            var item = tabset.Items.Last();
            await tabset.RemoveTab(item);
        }
    }

    private Task AddTab(Tab tabset)
    {
        var text = $"Tab {tabset.Items.Count() + 1}";
        tabset.AddTab(new Dictionary<string, object?>
        {
            [nameof(TabItem.Text)] = text,
            [nameof(TabItem.IsActive)] = true,
            [nameof(TabItem.ChildContent)] = new RenderFragment(builder =>
            {
                var index = 0;
                builder.OpenElement(index++, "div");
                builder.AddContent(index++, Localizer["BackAddTabText", text]);
                builder.CloseElement();
            })
        });
        return Task.CompletedTask;
    }
}

Only the current label is rendered

By setting the isOnlyRenderActiveTab parameter, the component renders only the current active label

Demo

Count Weather forecast

Counter

Current count: 0

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Tabs> Localizer

<Tab IsBorderCard="true" IsOnlyRenderActiveTab="true">
    <TabItem Text="@Localizer["TabItem8Text"]">
        <Counter></Counter>
    </TabItem>
    <TabItem Text="@Localizer["TabItem9Text"]">
        <FetchData></FetchData>
    </TabItem>
</Tab>

Lazy load tab item

By setting IsLazyLoadTabItem="true" enable the lazy load feature

Demo

Count Weather forecast

Counter

Current count: 0

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Tabs> Localizer

<Tab IsBorderCard="true" IsLazyLoadTabItem="true">
    <TabItem Text="@Localizer["TabItem8Text"]">
        <Counter></Counter>
    </TabItem>
    <TabItem Text="@Localizer["TabItem9Text"]">
        <FetchData></FetchData>
    </TabItem>
</Tab>

Header Template

customer the header UI via HeaderTemplate

Demo

Todo List 9

Count

Use Badge in the HeaderTemplate

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Tabs> Localizer
@inject ToastService ToastService

<Tab IsBorderCard="true" @ref="TabSet3">
    <TabItem>
        <HeaderTemplate>
            <div class="@GetClassString(context)" @onclick="() => OnClickTabItem(context)">
                <i class="fa-solid fa-tv"></i>
                <span class="mx-2">@Localizer["BlockHeaderTemplateHeaderText"]</span>
                <Badge Color="Color.Danger" style="position: absolute; right: 2px; top: 2px;">9</Badge>
            </div>
        </HeaderTemplate>
        <ChildContent>
            <div>@((MarkupString)Localizer["BlockHeaderTemplateDesc"].Value)</div>
        </ChildContent>
    </TabItem>
    <TabItem Text="@Localizer["TabItem8Text"]">
        <Counter></Counter>
    </TabItem>
</Tab>

@code {
    [NotNull]
    private Tab? TabSet3 { get; set; }

    private static string? GetClassString(TabItem tabItem) => CssBuilder.Default("tabs-item")
        .AddClass("active", tabItem.IsActive)
        .Build();

    private async Task OnClickTabItem(TabItem tabItem)
    {
        TabSet3.ActiveTab(tabItem);
        await ToastService.Information("Click TabItem", $"{tabItem.Text} clicked");
    }
}

Set header text

Set the parameter Text of TabItem custom the tabitem's header title'

Demo

Count Weather forecast Test

Counter

Current count: 0

Weather forecast

This component demonstrates fetching data from a service.

Date	Temp. (C)	Temp. (F)	Summary
3/23/2023	41	105	Warm
3/24/2023	40	103	Chilly
3/25/2023	-13	9	Scorching
3/26/2023	-15	6	Chilly
3/27/2023	1	33	Warm

@using BootstrapBlazor.Shared.Samples
@inject IStringLocalizer<Tabs> Localizer

<Tab IsBorderCard="true">
    <TabItem Text="@Localizer["TabItem8Text"]">
        <Counter></Counter>
    </TabItem>
    <TabItem Text="@Localizer["TabItem9Text"]">
        <FetchData></FetchData>
    </TabItem>
    <TabItem Text="@TabItemText">
        <DemoTabItem OnSetTitle="@OnSetTitle" />
    </TabItem>
</Tab>

@code {
    private string TabItemText { get; set; } = "Test";

    private Task OnSetTitle(string text)
    {
        TabItemText = text;
        StateHasChanged();
        return Task.CompletedTask;
    }
}

Set header text icon

Set the parameter by TabItem instance method SetHeader

Demo

Text

Reset the title of this TabItem by click the button

<Tab IsBorderCard="true">
    <TabItem Text="Text">
        <DemoTabItemSetText />
    </TabItem>
</Tab>

Attributes

Method

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Tabs

A collection of data that is associated with the separation content but belongs to a different category.

Tips

Demo

Demo

Demo

Demo

Demo

Tips

Demo

Demo

Demo

Counter

Weather forecast

Demo

Demo

Tips

Demo

Counter

Demo

Counter

Demo

Counter

Demo

Counter

Weather forecast

Demo

Attributes

Method

Bootstrap Blazor Component library updated to 7.4.4-beta01