feat(Layout): support TabStyle/ShowToolbar parameter (#5703)

* refactor: Layout 集成 Tab 新属性

* refactor: 微调 z-index 值

* test: 更新单元测试

* chore: bump version 9.5.0-beta15

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.5.0-beta13</Version>
+    <Version>9.5.0-beta15</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Layout/Layout.razor

@@ -119,6 +119,11 @@
             <Tab ClickTabToNavigation="ClickTabToNavigation" AdditionalAssemblies="@AdditionalAssemblies"
                  ShowExtendButtons="ShowTabExtendButtons" ShowClose="ShowTabItemClose" AllowDrag="AllowDragTab"        
                  DefaultUrl="@TabDefaultUrl" ExcludeUrls="@ExcludeUrls" IsOnlyRenderActiveTab="IsOnlyRenderActiveTab"
+                 TabStyle="TabStyle" ShowToolbar="@ShowToolbar" ToolbarTemplate="@ToolbarTemplate"
+                 ShowRefreshToolbarButton="ShowRefreshToolbarButton" ShowFullscreenToolbarButton="ShowFullscreenToolbarButton"
+                 RefreshToolbarButtonIcon="@RefreshToolbarButtonIcon" FullscreenToolbarButtonIcon="@FullscreenToolbarButtonIcon"
+                 RefreshToolbarTooltipText="@RefreshToolbarTooltipText" FullscreenToolbarTooltipText="@FullscreenToolbarTooltipText"
+                 OnToolbarRefreshCallback="OnToolbarRefreshCallback"
                  Body="@Main" NotAuthorized="NotAuthorized!" NotFound="NotFound!" NotFoundTabText="@NotFoundTabText">
             </Tab>
         }

src/BootstrapBlazor/Components/Layout/Layout.razor.cs

@@ -17,6 +17,66 @@ public partial class Layout : IHandlerException
 {
     private bool IsSmallScreen { get; set; }
 
+    /// <summary>
+    /// Gets or sets the tab style. Default is <see cref="TabStyle.Default"/>.
+    /// </summary>
+    [Parameter]
+    public TabStyle TabStyle { get; set; }
+
+    /// <summary>
+    /// Gets or sets whether show the toolbar. Default is false.
+    /// </summary>
+    [Parameter]
+    public bool ShowToolbar { get; set; }
+
+    /// <summary>
+    /// Gets or sets the template of the toolbar button. Default is null.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ToolbarTemplate { get; set; }
+
+    /// <summary>
+    /// Gets or sets whether show the full screen button. Default is true.
+    /// </summary>
+    [Parameter]
+    public bool ShowFullscreenToolbarButton { get; set; } = true;
+
+    /// <summary>
+    /// Gets or sets the full screen toolbar button icon string. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? FullscreenToolbarButtonIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the full screen toolbar button tooltip string. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? FullscreenToolbarTooltipText { get; set; }
+
+    /// <summary>
+    /// Gets or sets whether show the full screen button. Default is true.
+    /// </summary>
+    [Parameter]
+    public bool ShowRefreshToolbarButton { get; set; } = true;
+
+    /// <summary>
+    /// Gets or sets the refresh toolbar button icon string. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? RefreshToolbarButtonIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the refresh toolbar button tooltip string. Default is null.
+    /// </summary>
+    [Parameter]
+    public string? RefreshToolbarTooltipText { get; set; }
+
+    /// <summary>
+    /// Gets or sets the refresh toolbar button click event callback. Default is null.
+    /// </summary>
+    [Parameter]
+    public Func<Task>? OnToolbarRefreshCallback { get; set; }
+
     /// <summary>
     /// 获得/设置 侧边栏状态
     /// </summary>

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

@@ -695,7 +695,10 @@ public void AddTab(string url, string text, string? icon = null, bool active = t
 
     private void AddTabItem(string url)
     {
-        var parameters = new Dictionary<string, object?>();
+        var parameters = new Dictionary<string, object?>
+        {
+            { nameof(TabItem.Url), url }
+        };
         var context = RouteTableFactory.Create(AdditionalAssemblies, url);
         if (context.Handler != null)
         {
@@ -720,7 +723,6 @@ private void AddTabItem(string url)
                 var menu = GetMenuItem(url) ?? new MenuItem() { Text = url.Split("/").FirstOrDefault() };
                 SetTabItemParameters(menu.Text, menu.Icon, true, true);
             }
-            parameters.Add(nameof(TabItem.Url), url);
 
             parameters.Add(nameof(TabItem.ChildContent), new RenderFragment(builder =>
             {

src/BootstrapBlazor/Components/Tab/Tab.razor.scss

@@ -136,7 +136,6 @@
     left: 0;
     height: 2px;
     background-color: var(--bb-tabs-bar-bg);
-    z-index: 1;
     transition: transform .3s cubic-bezier(.645,.045,.355,1);
     list-style: none;
 }
@@ -559,10 +558,9 @@
         align-items: flex-end;
         flex-shrink: 0;
         padding: 0 1rem;
-        z-index: 1;
 
         &.active {
-            z-index: 5;
+            z-index: 1;
 
             .tab-corner {
                 background-color: var(--bs-body-bg);

test/UnitTest/Components/LayoutTest.cs

@@ -13,6 +13,42 @@ namespace UnitTest.Components;
 
 public class LayoutTest : BootstrapBlazorTestBase
 {
+    [Fact]
+    public void TabStyle_Ok()
+    {
+        var cut = Context.RenderComponent<Layout>(pb =>
+        {
+            pb.Add(a => a.UseTabSet, true);
+            pb.Add(a => a.TabStyle, TabStyle.Default);
+            pb.Add(a => a.RefreshToolbarButtonIcon, "test-refresh-icon");
+            pb.Add(a => a.FullscreenToolbarButtonIcon, "test-fullscreen-icon");
+            pb.Add(a => a.OnToolbarRefreshCallback, () => Task.CompletedTask);
+            pb.Add(a => a.RefreshToolbarTooltipText, "test-refresh-tooltip");
+            pb.Add(a => a.FullscreenToolbarTooltipText, "test-fullscreen-tooltip");
+        });
+        Assert.DoesNotContain("tabs-chrome", cut.Markup);
+        Assert.DoesNotContain("tabs-capsule", cut.Markup);
+
+        cut.SetParametersAndRender(pb => pb.Add(a => a.TabStyle, TabStyle.Capsule));
+        Assert.Contains("tabs-capsule", cut.Markup);
+
+        cut.SetParametersAndRender(pb => pb.Add(a => a.TabStyle, TabStyle.Chrome));
+        Assert.Contains("tabs-chrome", cut.Markup);
+
+        cut.SetParametersAndRender(pb => pb.Add(a => a.ShowToolbar, true));
+        Assert.Contains("tabs-nav-toolbar-refresh", cut.Markup);
+        Assert.Contains("tabs-nav-toolbar-fs", cut.Markup);
+
+        cut.SetParametersAndRender(pb => pb.Add(a => a.ShowRefreshToolbarButton, false));
+        Assert.DoesNotContain("tabs-nav-toolbar-refresh", cut.Markup);
+
+        cut.SetParametersAndRender(pb => pb.Add(a => a.ShowFullscreenToolbarButton, false));
+        Assert.DoesNotContain("tabs-nav-toolbar-fs", cut.Markup);
+
+        cut.SetParametersAndRender(pb => pb.Add(a => a.ToolbarTemplate, builder => builder.AddContent(0, "test-toolbar-template")));
+        Assert.Contains("test-toolbar-template", cut.Markup);
+    }
+
     [Fact]
     public void ShowFooter_OK()
     {