Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

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

Basic, concise tabs.

Demo
I am a user manager
I am menu management
I am roles management
I am department management

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

Demo
I am a user manager
I am menu management
I am roles management
I am department management

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

Demo
I am a user manager
I am menu management
I am roles management
I am department management

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

Demo
I am a user manager
I am menu management
I am roles management
I am department management

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

Demo
I am a user manager
I am menu management
I am roles management
I am department management

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

I am a user manager
I am menu management
I am roles management
I am a system log
I am Sign log management
I am a timed task manager
Split Line
I am a user manager
I am menu management
I am roles management
I am a system log
I am Sign log management
I am a timed task manager
Split Line
I am a user manager
I am menu management
I am roles management
I am a system log
I am Sign log management
I am a timed task manager

Dynamically add/remove TabItem by calling the component api

Demo

I am a user manager
I am menu management
I am roles management
I am department management
I am a timed task manager

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

Counter

Current count: 0

Weather forecast

This component demonstrates fetching data from a service.

Date Temp. (C) Temp. (F) Summary
9/26/2021 49 120 Bracing
9/27/2021 50 121 Hot
9/28/2021 34 93 Sweltering
9/29/2021 -17 2 Chilly
9/30/2021 13 55 Cool

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

Header

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

I am a user manager
I am menu management
I am roles management
I am department management
I am a timed task manager

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

Demo

Counter

Current count: 0

Attributes

Loading...

Method

Loading...
@page "/tabs"
@inject IStringLocalizer<Tabs> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<p>@((MarkupString)Localizer["P1"].Value)</p>

<Tips>
    <p>
        @((MarkupString)Localizer["TipsP"].Value)
        <ul class="ul-demo">
            <li>@Localizer["TipsLi1"]</li>
            <li>@Localizer["TipsLi2"]</li>
        </ul>
        <div>@((MarkupString)Localizer["TipsDiv"].Value)</div>
    </p>
    <p>@Localizer["TipsP2"]</p>
</Tips>

<Block Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]">
    <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>
</Block>

<Block Title="@Localizer["Blcok2Title"]" Introduction='@Localizer["Block2Intro"]'>
    <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>
</Block>

<Block Title="@Localizer["Block3Title"]" Introduction='@Localizer["Block3Intro"]'>
    <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>
</Block>

<Block Title="@Localizer["Block4Title"]" Introduction='@Localizer["Block4Intro"]'>
    <Tab IsCard="true">
        <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa fa-user">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]" Icon="fa fa-dashboard">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]" Icon="fa fa-sitemap">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]" Icon="fa fa-bank">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</Block>

<Block Title="@Localizer["Block5Title"]" Introduction='@Localizer["Block5Intro"]'>
    <Tips>
        @((MarkupString)Localizer["Tips2"].Value)
    </Tips>
    <Tab IsCard="true" ShowClose="true">
        <TabItem Text="@Localizer["TabItem1Text"]" Icon="fa fa-user" Closable="false">
            <div>@Localizer["TabItem1Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem2Text"]" Icon="fa fa-dashboard">
            <div>@Localizer["TabItem2Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem3Text"]" Icon="fa fa-sitemap">
            <div>@Localizer["TabItem3Content"]</div>
        </TabItem>
        <TabItem Text="@Localizer["TabItem4Text"]" Icon="fa fa-bank">
            <div>@Localizer["TabItem4Content"]</div>
        </TabItem>
    </Tab>
</Block>

<Block Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]">
    <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>
</Block>

<Block Title="@Localizer["Block7Title"]" Introduction="@Localizer["Block7Intro"]">
    <p>
        <Button Icon="fa fa-plus-circle" OnClickWithoutRender="@(() => AddTab(TabSet))" Text="@Localizer["AddButtonText"]">
        </Button>
        <Button Color="Color.Danger" Icon="fa fa-minus-circle" IsDisabled="@RemoveEndable" OnClickWithoutRender="@(() => RemoveTab(TabSet))" Text="@Localizer["RmoveButtonText"]">
        </Button>
        <Button Icon="fa fa-fa" 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>
</Block>

<Block Title="@Localizer["Block8Title"]" Introduction="@Localizer["Block8Intro"]">
    <p>
        @((MarkupString)Localizer["P2"].Value)
    </p>
    <Tab IsBorderCard="true">
        <TabItem Text="@Localizer["TabItem8Text"]">
            <Counter></Counter>
        </TabItem>
        <TabItem Text="@Localizer["TabItem9Text"]">
            <FetchData></FetchData>
        </TabItem>
    </Tab>
</Block>

<Block Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]">
    <p>
        @((MarkupString)Localizer["P3"].Value)
    </p>
    <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>
</Block>

<Block Title="@Localizer["Block10Title"]" Introduction="@Localizer["Block10Intro"]">
    <Tips>@((MarkupString)Localizer["Tips3"].Value)</Tips>
    <p>
        <button type="button" class="btn btn-outline-primary" @onclick="@(e => AddTab(TabSet2))">
            <i class="fa fa-plus-circle"></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 fa-minus-circle"></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>
</Block>

<Block Title="@Localizer["Block11Title"]" Introduction="@Localizer["Block11Intro"]">
    <Tab IsBorderCard="true" IsOnlyRenderActiveTab="true">
        <TabItem Text="@Localizer["TabItem8Text"]">
            <Counter></Counter>
        </TabItem>
        <TabItem Text="@Localizer["TabItem9Text"]">
            <FetchData></FetchData>
        </TabItem>
    </Tab>
</Block>

<AttributeTable Items="@GetAttributes()" Title="@Localizer["AttTitle"]" />

<MethodTable Items="@GetMethods()" Title="@Localizer["MethodTitle"]" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Pages.Components;
using Microsoft.AspNetCore.Components;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Tabs
    {
        [NotNull]
        private Tab? TabSet { get; set; }

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

        /// <summary>
        /// OnInitialized 方法
        /// </summary>
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            await base.OnAfterRenderAsync(firstRender);

            if (firstRender)
            {
                var menuItem = TabMenu?.Items.FirstOrDefault();
                if (menuItem != null)
                {
                    await InvokeAsync(() =>
                    {
                        var _ = TabMenu?.OnClick?.Invoke(menuItem);
                    });
                }
            }
        }

        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 Task RemoveTab(Tab tabset)
        {
            if (tabset.Items.Count() > 4)
            {
                var item = tabset.Items.Last();
                tabset.RemoveTab(item);
            }
            return Task.CompletedTask;
        }

        private Placement BindPlacement = Placement.Top;

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

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

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

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

        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()
        });

        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "IsBorderCard",
                Description = Localizer["Att1"]!,
                Type = "boolean",
                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsCard",
                Description = Localizer["Att2"]!,
                Type = "boolean",
                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsOnlyRenderActiveTab",
                Description = Localizer["Att3"]!,
                Type = "boolean",
                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowClose",
                Description = Localizer["Att4"]!,
                Type = "boolean",
                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowExtendButtons",
                Description = Localizer["Att5"]!,
                Type = "boolean",
                ValueList = " — ",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ClickTabToNavigation",
                Description = Localizer["Att6"]!,
                Type = "boolean",
                ValueList = "true/false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Placement",
                Description = Localizer["Att7"]!,
                Type = "Placement",
                ValueList = "Top|Right|Bottom|Left",
                DefaultValue = "Top"
            },
            new AttributeItem() {
                Name = "Height",
                Description = Localizer["Att8"]!,
                Type = "int",
                ValueList = " — ",
                DefaultValue = "0"
            },
            new AttributeItem() {
                Name = "Items",
                Description = Localizer["Att9"]!,
                Type = "IEnumerable<TabItemBase>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "ChildContent",
                Description = Localizer["Att10"]!,
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "AdditionalAssemblies",
                Description = Localizer["Att11"]!,
                Type = "IEnumerable<Assembly>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnClickTab",
                Description = Localizer["Att12"]!,
                Type = "Func<TabItem, Task>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "TabItemTextDictionary",
                Description = Localizer["Att13"]!,
                Type = "Dictionary<string, string>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };

        /// <summary>
        /// 获得方法
        /// </summary>
        /// <returns></returns>
        private IEnumerable<MethodItem> GetMethods() => new MethodItem[]
        {
            // TODO: 移动到数据库中
            new MethodItem() {
                Name = "AddTab",
                Description = Localizer["Method1"]!,
                Parameters = "TabItem",
                ReturnValue = " — "
            },
            new MethodItem() {
                Name = "RemoveTab",
                Description = Localizer["Method2"]!,
                Parameters = "TabItem",
                ReturnValue = " — "
            },
            new MethodItem() {
                Name = "ActiveTab",
                Description = Localizer["Method3"]!,
                Parameters = "TabItem",
                ReturnValue = " — "
            },
            new MethodItem() {
                Name = "ClickPrevTab",
                Description = Localizer["Method4"]!,
                Parameters = "",
                ReturnValue = "Task"
            },
            new MethodItem() {
                Name = "ClickNextTab",
                Description = Localizer["Method5"]!,
                Parameters = "",
                ReturnValue = "Task"
            },
            new MethodItem() {
                Name = "CloseCurrentTab",
                Description = Localizer["Method6"]!,
                Parameters = "",
                ReturnValue = "Task"
            },
            new MethodItem() {
                Name = "CloseOtherTabs",
                Description = Localizer["Method7"]!,
                Parameters = "",
                ReturnValue = "Task"
            },
            new MethodItem() {
                Name = "CloseAllTabs",
                Description = Localizer["Method8"]!,
                Parameters = "",
                ReturnValue = "Task"
            },
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload