feat(Tab): add TabStyle parameter (#5640)

* feat: 增加 IsChromeStyle 参数

* refactor: 调整禁用逻辑禁用后不允许 active 样式

* style: 重构样式

* refactor: 增加 tabs-chrome 样式

* refactor: 调整样式

* doc: 增加示例文档

* refactor: 增加 TabStyle 参数

* doc: 更新文档

* doc: 更新参数文档

* test: 更新单元测试

* refactor: 增加 Placement 参数限制

* doc: 更新文档

* test: 更新单元测试

* doc: 更新示例

* style: 调整样式

* style: 更新样式

* style: 更新样式

* style: 更新样式

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor

@@ -30,7 +30,7 @@
 </div>
 
 <div class="tabs-coms">
-    <Tab IsBorderCard="true" IsLazyLoadTabItem="true" ShowFullScreen="true" @ref="Tab">
+    <Tab IsBorderCard="true" IsLazyLoadTabItem="true" ShowFullScreen="true" TabStyle="TabStyle.Chrome" @ref="Tab">
         <TabItem Text="Example" Icon="fa-solid fa-desktop">
             <CascadingValue Value="@RazorFileName" Name="RazorFileName">
                 @Body

src/BootstrapBlazor.Server/Components/Samples/Tabs.razor

@@ -436,6 +436,23 @@ private void Navigation()
     </Tab>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["TabsChromeStyleTitle"]" Introduction="@Localizer["TabsChromeStyleIntro"]" Name="TabStyle">
+    <Tab IsCard="true" ShowClose="true" TabStyle="TabStyle.Chrome">
+        <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>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" Title="@Localizer["AttTitle"]" />
 
 <MethodTable Items="@GetMethods()" Title="@Localizer["MethodTitle"]" />

src/BootstrapBlazor.Server/Components/Samples/Tabs.razor.cs

@@ -204,7 +204,7 @@ private AttributeItem[] GetAttributes() =>
         new()
         {
             Name = "IsLazyLoadTabItem",
-            Description = Localizer["AttributeIsLazyLoadTabItem"].Value,
+            Description = Localizer["TabAttIsLazyLoadTabItem"].Value,
             Type = "boolean",
             ValueList = "true/false",
             DefaultValue = "false"
@@ -222,21 +222,21 @@ private AttributeItem[] GetAttributes() =>
             Name = "ShowExtendButtons",
             Description = Localizer["TabAtt5ShowExtendButtons"].Value,
             Type = "boolean",
-            ValueList = " — ",
+            ValueList = "true|false",
             DefaultValue = "false"
         },
         new()
         {
-            Name = "ShowExtendButtons",
-            Description = Localizer["TabAttrShowNavigatorButtons"].Value,
+            Name = "ShowNavigatorButtons",
+            Description = Localizer["TabAttShowNavigatorButtons"].Value,
             Type = "boolean",
             ValueList = "true|false",
             DefaultValue = "true"
         },
         new()
         {
-            Name = "ShowExtendButtons",
-            Description = Localizer["TabAttrShowActiveBar"].Value,
+            Name = "ShowActiveBar",
+            Description = Localizer["TabAttShowActiveBar"].Value,
             Type = "boolean",
             ValueList = "true|false",
             DefaultValue = "true"
@@ -250,6 +250,14 @@ private AttributeItem[] GetAttributes() =>
             DefaultValue = "false"
         },
         new()
+        {
+            Name = "TabStyle",
+            Description = Localizer["TabAtt2TabStyle"].Value,
+            Type = "TabStyle",
+            ValueList = "Default|Chrome",
+            DefaultValue = "Default"
+        },
+        new()
         {
             Name = "Placement",
             Description = Localizer["TabAtt7Placement"].Value,

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -2083,6 +2083,7 @@
     "TabAtt5ShowExtendButtons": "Whether to display the extension button",
     "TabAttShowNavigatorButtons": "Whether to display the previous and next navigation buttons",
     "TabAttShowActiveBar": "Whether to display active bar",
+    "TabAttIsLazyLoadTabItem": "Whether lazy load tab item",
     "TabAtt6ClickTabToNavigation": "Whether to navigate when you click on the title",
     "TabAtt7Placement": "Set the label position",
     "TabAtt8Height": "Set the label height",
@@ -2116,7 +2117,10 @@
     "AttributeExcludeUrls": "Exclude address support for wildcards",
     "AttributeButtonTemplate": "The template for Buttons",
     "TabsDisabledTitle": "Disabled",
-    "TabsDisabledIntro": "Disable the current <code>TabItem</code> by setting <code>IsDisabled=\"true\"</code> to prohibit click, drag, close etc."
+    "TabsDisabledIntro": "Disable the current <code>TabItem</code> by setting <code>IsDisabled=\"true\"</code> to prohibit click, drag, close etc.",
+    "TabsChromeStyleTitle": "Chrome Style",
+    "TabsChromeStyleIntro": "Set the Chrome browser tab style by setting <code>TabStyle=\"TabStyle.Chrome\"</code>. Currently only supports <code>Placement=\"Placement.Top\"</code> mode",
+    "TabAtt2TabStyle": "Set the tab style"
   },
   "BootstrapBlazor.Server.Components.Components.DemoTabItem": {
     "Info": "Reset the title of this <code>TabItem</code> by click the button",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -2083,6 +2083,7 @@
     "TabAtt5ShowExtendButtons": "是否显示扩展按钮",
     "TabAttShowNavigatorButtons": "是否显示前后导航按钮",
     "TabAttShowActiveBar": "是否显示活动标签",
+    "TabAttIsLazyLoadTabItem": "是否延时加载标签内容",
     "TabAtt6ClickTabToNavigation": "点击标题时是否导航",
     "TabAtt7Placement": "设置标签位置",
     "TabAtt8Height": "设置标签高度",
@@ -2116,7 +2117,10 @@
     "AttributeExcludeUrls": "排除地址支持通配符",
     "AttributeButtonTemplate": "按钮模板",
     "TabsDisabledTitle": "禁用",
-    "TabsDisabledIntro": "通过设置 <code>IsDisabled=\"true\"</code> 禁用当前 <code>TabItem</code> 禁止点击、拖动、关闭等操作"
+    "TabsDisabledIntro": "通过设置 <code>IsDisabled=\"true\"</code> 禁用当前 <code>TabItem</code> 禁止点击、拖动、关闭等操作",
+    "TabsChromeStyleTitle": "Chrome 样式",
+    "TabsChromeStyleIntro": "通过设置 <code>TabStyle=\"TabStyle.Chrome\"</code> 设置 Chrome 浏览器标签页样式，目前仅支持 <code>Placement=\"Placement.Top\"</code> 模式",
+    "TabAtt2TabStyle": "设置标签页样式"
   },
   "BootstrapBlazor.Server.Components.Components.DemoTabItem": {
     "Info": "点击下方按钮，本 <code>TabItem</code> 标题更改为当前分钟与秒",

src/BootstrapBlazor/Components/Tab/Tab.razor

@@ -45,39 +45,17 @@ else
                             }
                             @foreach (var item in Items)
                             {
-                                if (item.HeaderTemplate != null)
+                                @if (item.HeaderTemplate != null)
                                 {
                                     @item.HeaderTemplate(item)
                                 }
                                 else if (item.IsDisabled)
                                 {
-                                    <div role="tab" class="@GetClassString(item)">
-                                        @if (!string.IsNullOrEmpty(item.Icon))
-                                        {
-                                            <i class="@GetIconClassString(item.Icon)"></i>
-                                        }
-                                        <span class="tabs-item-text">@item.Text</span>
-                                    </div>
+                                    @RenderDisabledHeaderByStyle(item)
                                 }
                                 else
                                 {
-                                    <a @key="item" href="@item.Url" role="tab" tabindex="-1" class="@GetClassString(item)" @onclick="@(() => OnClickTabItem(item))" @onclick:preventDefault="@(!ClickTabToNavigation)" draggable="@DraggableString">
-                                        @if (!string.IsNullOrEmpty(item.Icon))
-                                        {
-                                            <i class="@GetIconClassString(item.Icon)"></i>
-                                        }
-                                        <span class="tabs-item-text">@item.Text</span>
-                                        @if (ShowFullScreen && item.ShowFullScreen)
-                                        {
-                                            <FullScreenButton TargetId="@GetIdByTabItem(item)"></FullScreenButton>
-                                        }
-                                        @if (ShowClose && item.Closable)
-                                        {
-                                            <span class="tabs-item-close" @onclick:stopPropagation @onclick:preventDefault @onclick="() => RemoveTab(item)">
-                                                <i class="@CloseIcon"></i>
-                                            </span>
-                                        }
-                                    </a>
+                                    @RenderHeaderByStyle(item)
                                 }
                             }
                             @if (IsCard || IsBorderCard)
@@ -145,4 +123,54 @@ else
     @<CascadingValue Value="item" IsFixed="true">
         @RenderTabItemContent(item)
     </CascadingValue>;
+
+    RenderFragment RenderChromeDisabledHeader(TabItem item) =>
+    @<div @key="@item" class="@GetItemWrapClassString(item)">
+        <div role="tab" class="@GetClassString(item)">
+            @RenderHeaderContent(item)
+        </div>
+        <i class="tab-corner tab-corner-left"></i>
+        <i class="tab-corner tab-corner-right"></i>
+    </div>;
+
+    RenderFragment RenderDefaultDisabledHeader(TabItem item) =>
+    @<div @key="item" role="tab" class="@GetClassString(item)">
+        @RenderHeaderContent(item)
+    </div>;
+
+    RenderFragment RenderChromeHeader(TabItem item) =>
+    @<div @key="@item" class="@GetItemWrapClassString(item)">
+        <a href="@item.Url" role="tab" tabindex="-1" class="@GetClassString(item)" @onclick="@(() => OnClickTabItem(item))" @onclick:preventDefault="@(!ClickTabToNavigation)" draggable="@DraggableString">
+            @RenderHeaderContent(item)
+        </a>
+        <i class="tab-corner tab-corner-left"></i>
+        <i class="tab-corner tab-corner-right"></i>
+    </div>;
+
+    RenderFragment RenderDefaultHeader(TabItem item) =>
+    @<a @key="item" href="@item.Url" role="tab" tabindex="-1" class="@GetClassString(item)" @onclick="@(() => OnClickTabItem(item))" @onclick:preventDefault="@(!ClickTabToNavigation)" draggable="@DraggableString">
+        @RenderHeaderContent(item)
+    </a>;
+
+    RenderFragment RenderHeaderContent(TabItem item) =>
+    @<div class="tabs-item-body">
+        @if (!string.IsNullOrEmpty(item.Icon))
+        {
+            <i class="@GetIconClassString(item.Icon)"></i>
+        }
+        <span class="tabs-item-text">@item.Text</span>
+        @if (!item.IsDisabled)
+        {
+            @if (ShowFullScreen && item.ShowFullScreen)
+            {
+                <FullScreenButton TargetId="@GetIdByTabItem(item)"></FullScreenButton>
+            }
+            @if (ShowClose && item.Closable)
+            {
+                <span class="tabs-item-close" @onclick:stopPropagation @onclick:preventDefault @onclick="() => RemoveTab(item)">
+                    <i class="@CloseIcon"></i>
+                </span>
+            }
+        }
+    </div>;
 }

src/BootstrapBlazor/Components/Tab/Tab.razor.cs

@@ -24,8 +24,12 @@ public partial class Tab : IHandlerException
         .AddClass("extend", ShouldShowExtendButtons())
         .Build();
 
+    private static string? GetItemWrapClassString(TabItem item) => CssBuilder.Default("tabs-item-wrap")
+        .AddClass("active", item.IsActive && !item.IsDisabled)
+        .Build();
+
     private string? GetClassString(TabItem item) => CssBuilder.Default("tabs-item")
-        .AddClass("active", item.IsActive)
+        .AddClass("active", TabStyle == TabStyle.Default && item.IsActive && !item.IsDisabled)
         .AddClass("disabled", item.IsDisabled)
         .AddClass(item.CssClass)
         .AddClass("is-closeable", ShowClose)
@@ -39,7 +43,8 @@ public partial class Tab : IHandlerException
         .AddClass("tabs-card", IsCard)
         .AddClass("tabs-border-card", IsBorderCard)
         .AddClass($"tabs-{Placement.ToDescriptionString()}", Placement == Placement.Top || Placement == Placement.Right || Placement == Placement.Bottom || Placement == Placement.Left)
-        .AddClass($"tabs-vertical", Placement == Placement.Left || Placement == Placement.Right)
+        .AddClass("tabs-vertical", Placement == Placement.Left || Placement == Placement.Right)
+        .AddClass("tabs-chrome", TabStyle == TabStyle.Chrome)
        .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
@@ -283,6 +288,12 @@ public partial class Tab : IHandlerException
     [Parameter]
     public Func<TabItem, Task>? OnDragItemEndAsync { get; set; }
 
+    /// <summary>
+    /// Gets or sets the tab style. Default is <see cref="TabStyle.Default"/>.
+    /// </summary>
+    [Parameter]
+    public TabStyle TabStyle { get; set; }
+
     [CascadingParameter]
     private Layout? Layout { get; set; }
 
@@ -352,6 +363,11 @@ protected override void OnParametersSet()
 
         AdditionalAssemblies ??= new[] { Assembly.GetEntryAssembly()! };
 
+        if (Placement != Placement.Top && TabStyle == TabStyle.Chrome)
+        {
+            TabStyle = TabStyle.Default;
+        }
+
         if (ClickTabToNavigation)
         {
             if (!HandlerNavigation)
@@ -783,6 +799,14 @@ private void ActiveTabItem(TabItem item)
     public void SetDisabledItem(TabItem item, bool disabled)
     {
         item.SetDisabledWithoutRender(disabled);
+        if (disabled)
+        {
+            item.SetActive(false);
+        }
+        if (TabItems.Any(i => i.IsActive) == false)
+        {
+            TabItems.Where(i => !i.IsDisabled).FirstOrDefault()?.SetActive(true);
+        }
         StateHasChanged();
     }
 
@@ -854,6 +878,10 @@ public async Task DragItemCallback(int originIndex, int currentIndex)
 
     private string? GetIdByTabItem(TabItem item) => (ShowFullScreen && item.ShowFullScreen) ? ComponentIdGenerator.Generate(item) : null;
 
+    private RenderFragment RenderDisabledHeaderByStyle(TabItem item) => TabStyle == TabStyle.Chrome ? RenderChromeDisabledHeader(item) : RenderDefaultDisabledHeader(item);
+
+    private RenderFragment RenderHeaderByStyle(TabItem item) => TabStyle == TabStyle.Chrome ? RenderChromeHeader(item) : RenderDefaultHeader(item);
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>