feat(Tab): add ShowActiveBar parameter (#5388)

* feat(Tab): add ShowActiveBar parameter

* test: 增加单元测试

* doc: 更新注释

* doc: 增加新参数说明文档

Author: ArgoZhang

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

@@ -226,6 +226,22 @@ private AttributeItem[] GetAttributes() =>
             DefaultValue = "false"
         },
         new()
+        {
+            Name = "ShowExtendButtons",
+            Description = Localizer["TabAttrShowNavigatorButtons"].Value,
+            Type = "boolean",
+            ValueList = "true|false",
+            DefaultValue = "true"
+        },
+        new()
+        {
+            Name = "ShowExtendButtons",
+            Description = Localizer["TabAttrShowActiveBar"].Value,
+            Type = "boolean",
+            ValueList = "true|false",
+            DefaultValue = "true"
+        },
+        new()
         {
             Name = "ClickTabToNavigation",
             Description = Localizer["TabAtt6ClickTabToNavigation"].Value,
@@ -369,7 +385,6 @@ private AttributeItem[] GetAttributes() =>
     /// <returns></returns>
     private MethodItem[] GetMethods() =>
     [
-
         new MethodItem()
         {
             Name = "AddTab",

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

@@ -2085,6 +2085,8 @@
     "TabAtt3IsOnlyRenderActiveTab": "Whether to render only Active labels",
     "TabAtt4ShowClose": "Whether to display the close button",
     "TabAtt5ShowExtendButtons": "Whether to display the extension button",
+    "TabAttShowNavigatorButtons": "Whether to display the previous and next navigation buttons",
+    "TabAttShowActiveBar": "Whether to display active bar",
     "TabAtt6ClickTabToNavigation": "Whether to navigate when you click on the title",
     "TabAtt7Placement": "Set the label position",
     "TabAtt8Height": "Set the label height",

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

@@ -2085,6 +2085,8 @@
     "TabAtt3IsOnlyRenderActiveTab": "是否仅渲染 Active 标签",
     "TabAtt4ShowClose": "是否显示关闭按钮",
     "TabAtt5ShowExtendButtons": "是否显示扩展按钮",
+    "TabAttShowNavigatorButtons": "是否显示前后导航按钮",
+    "TabAttShowActiveBar": "是否显示活动标签",
     "TabAtt6ClickTabToNavigation": "点击标题时是否导航",
     "TabAtt7Placement": "设置标签位置",
     "TabAtt8Height": "设置标签高度",

src/BootstrapBlazor/Components/Tab/Tab.razor

@@ -81,7 +81,7 @@ else
                                 <div class="tabs-item-fix"></div>
                             }
                         </RenderTemplate>
-                        @if (!IsCard && !IsBorderCard)
+                        @if (!IsCard && !IsBorderCard && ShowActiveBar)
                         {
                             <div class="tabs-active-bar"></div>
                         }

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

@@ -126,11 +126,17 @@ public partial class Tab : IHandlerException
     public bool ShowExtendButtons { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否显示导航按钮 默认为 true 显示
+    /// 获得/设置 是否显示前后导航按钮 默认为 true 显示
     /// </summary>
     [Parameter]
     public bool ShowNavigatorButtons { get; set; } = true;
 
+    /// <summary>
+    /// 获得/设置 是否显示活动标签 默认为 true 显示
+    /// </summary>
+    [Parameter]
+    public bool ShowActiveBar { get; set; } = true;
+
     /// <summary>
     /// 获得/设置 点击 TabItem 时是否自动导航 默认为 false 不导航
     /// </summary>

test/UnitTest/Components/TabTest.cs

@@ -655,6 +655,28 @@ public void ShowNavigatorButtons_Ok()
         Assert.Empty(links);
     }
 
+    [Fact]
+    public void ShowActiveBar_Ok()
+    {
+        var cut = Context.RenderComponent<Tab>(pb =>
+        {
+            pb.Add(a => a.AdditionalAssemblies, new Assembly[] { GetType().Assembly });
+            pb.Add(a => a.ShowActiveBar, true);
+            pb.AddChildContent<TabItem>(pb =>
+            {
+                pb.Add(a => a.Text, "Tab1");
+                pb.Add(a => a.Url, "/Cat");
+            });
+        });
+        cut.Contains("<div class=\"tabs-active-bar\"></div>");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.ShowActiveBar, false);
+        });
+        cut.DoesNotContain("<div class=\"tabs-active-bar\"></div>");
+    }
+
     [Fact]
     public void Text_Ok()
     {