feat(Layout): add style support ShowTabInHeader parameter (#5773)

* refactor: 恢复样式

* refactor: 调整火柴棍出现逻辑

* refactor: 更新 Tab 支持 ShowTabInHeader 切换逻辑

* refactor: 更新样式

* style: 增加兼容模板的顶栏标签页样式

* chore: bump version 9.5.2

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

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

src/BootstrapBlazor/Components/Layout/Layout.razor.scss

@@ -49,6 +49,13 @@
 
         .layout-main {
             min-height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height));
+
+            > .tabs {
+                margin: -1rem;
+                border: none;
+                border-radius: unset;
+                min-height: calc(100% + 2rem);
+            }
         }
     }
 
@@ -184,6 +191,42 @@
                 transition: transform .3s linear;
             }
         }
+
+        > .tabs {
+            height: 100%;
+            display: flex;
+            justify-content: flex-end;
+            flex: 1;
+            width: 1%;
+            min-width: 0;
+            margin-bottom: -2px;
+        }
+
+        > .tabs.tabs-chrome {
+            .tabs-header {
+                --bb-tabs-item-height: 47px;
+                --bb-tabs-header-color: #fff;
+                --bb-tabs-chrome-item-height: 43px;
+                --bs-border-color: var(--bb-layout-headerbar-background);
+                --bb-tabs-header-bg-color: var(--bb-layout-headerbar-background);
+
+                .tabs-item-close:hover {
+                    background-color: transparent;
+                }
+
+                .tabs-item-wrap:not(.active) .tabs-item {
+                    color: var(--bb-tabs-header-color);
+                }
+
+                .tabs-nav-toolbar .btn {
+                    --bs-btn-color: var(--bb-tabs-header-color);
+                }
+
+                .nav-link-bar {
+                    --bs-body-color: var(--bb-tabs-header-color);
+                }
+            }
+        }
     }
 
     &:not(.has-footer) {
@@ -229,7 +272,7 @@
 
     &.is-fixed-tab {
         .layout-menu,
-        .tabs {
+        .layout-main > .tabs {
             height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height));
 
             .tabs-body {

src/BootstrapBlazor/Components/Tab/Tab.razor

@@ -65,7 +65,7 @@ else
                     <RenderTemplate>
                         @RenderTabList()
                     </RenderTemplate>
-                    @if (!IsCard && !IsBorderCard && ShowActiveBar)
+                    @if (!IsCard && !IsBorderCard && ShowActiveBar && TabStyle == TabStyle.Default)
                     {
                         <div class="tabs-active-bar"></div>
                     }

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

@@ -481,11 +481,6 @@ protected override void OnInitialized()
         base.OnInitialized();
 
         ErrorLogger?.Register(this);
-
-        if (Layout is { ShowTabInHeader: true })
-        {
-            Layout.RegisterTab(this);
-        }
     }
 
     /// <summary>
@@ -499,6 +494,15 @@ protected override void OnParametersSet()
             IsBorderCard = true;
         }
 
+        if (Layout is { ShowTabInHeader: true })
+        {
+            Layout.RegisterTab(this);
+        }
+        else
+        {
+            TabHeader = null;
+        }
+
         CloseOtherTabsText ??= Localizer[nameof(CloseOtherTabsText)];
         CloseAllTabsText ??= Localizer[nameof(CloseAllTabsText)];
         CloseCurrentTabText ??= Localizer[nameof(CloseCurrentTabText)];

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

@@ -494,7 +494,7 @@
 
 .tabs-chrome > .tabs-header,
 .tabs-capsule > .tabs-header {
-    --bb-tabs-header-height: 36px;
+    --bb-tabs-chrome-item-height: 36px;
     --bb-tabs-header-bg-color: var(--bs-border-color);
     --bb-tabs-item-body-border-radius: 14.5px;
     --bb-tabs-item-body-padding: 4px 10px;
@@ -637,7 +637,7 @@
             border: none !important;
             border-top-left-radius: 10px;
             border-top-right-radius: 10px;
-            height: var(--bb-tabs-header-height) !important;
+            height: var(--bb-tabs-chrome-item-height) !important;
 
             .tabs-item-body {
                 margin-bottom: var(--bb-tabs-item-body-margin-bottom);