feat(Layout): add IsFixedTabHeader parameter (#4668)

* doc: 代码格式化

* refactor: 移除空属性

* refactor: 重新设计收起样式

* feat: Layout 组件支持 static 渲染模式

* fix(Widget): 修复报错问题

* chore: bump version 9.0.0-beta03

* style: 移除抽屉 padding 间隙

* refactor: 移除宽度计算样式

* doc: 后台示例更新登录信息栏

* doc: 格式化文档

* refactor: 样式独立文件

* doc: 精简样式

* refactor: 更新 Widget 组件与模板一致

* refactor: 修复调整结构组件状态不正确问题

* refactor: 重构方法提高性能

* refactor: 修复布尔值时不触发 OnStateChanged 回调问题

* refactor: 修复布尔值时不触发 OnStateChanged 回调问题

* test: 增加单元测试

* refactor: 精简代码提高效率

* refactor: 调整右侧边框样式

* chore: bump version 9.0.1-beta01

* doc: 移除 2019 文字

* doc: 移除 2019 文字

* refactor: 更改样式名称

* refactor: 重构侧边栏收起样式

* refactor: 更新 Menu 透明样式

* doc: 更新后台管理样式

* style: 兼容 Menu 组件

* style: 增加响应式布局

* refactor: 重构样式

* wip: 临时移除静态支持

* style: 微调样式

* refactor: 精简样式

* style: 微调 Menu 样式

* refactor: 增加层次

* style: 调整 Title 颜色

* style: 调整收起展开菜单宽度样式

* style: 增加菜单右侧边框线

* doc: 调整文档

* doc: 更新文档链接

* style: 合并样式

* style: 合并样式

* style: 整理 header-bar 样式

* refactor: 重构样式

* style: 层次化样式

* style: 层次化样式

* refactor: 移除 IsPage 参数

* refactor: 移除 static 判断逻辑

* style: 合并 Header 样式

* refactor: 移除侧边栏抽屉

* style: 合并样式

* refactor: 移除 SideWidth=“0” 设置

* refactor: 使用 div 元素渲染按钮

* refactor: 恢复脚本

* refactor: 重构代码

* doc: 移除 IsPage 文档

* doc: 更新开发工具名称

* refactor: 调整层次结构

* refactor: 增加 IsFixedTabHeader 参数

* doc: 后台管理使用固定标签页参数

* test: 增加单元测试

* doc: 增加参数说明

* style: 更新固定标签头样式

* refactor: 增加 Layout 高度设置

* doc: 更新示例

* test: 更新单元测试

Author: ArgoZhang

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

@@ -6,7 +6,7 @@
 </HeadContent>
 
 <CascadingValue Value="this" IsFixed="true">
-    <Layout IsFullSide="@IsFullSide" IsFixedHeader="@IsFixedHeader" IsFixedFooter="@IsFixedFooter"
+    <Layout IsPage="true" IsFullSide="@IsFullSide" IsFixedHeader="@IsFixedHeader" IsFixedFooter="@IsFixedFooter" IsFixedTabHeader="IsFixedTabHeader"
             ShowFooter="@ShowFooter" ShowGotoTop="true" ShowCollapseBar="true" Menus="@Menus"
             UseTabSet="@UseTabSet" TabDefaultUrl="layout-page" AdditionalAssemblies="new[] { GetType().Assembly }" class="@LayoutClassString">
         <Header>

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

@@ -16,16 +16,10 @@ public sealed partial class PageLayout
 
     private string? LayoutClassString => CssBuilder.Default("layout-demo")
         .AddClass(Theme)
-        .AddClass("is-fixed-tab", IsFixedTab)
         .Build();
 
     private IEnumerable<MenuItem>? Menus { get; set; }
 
-    /// <summary>
-    /// 获得/设置 是否固定 TabHeader
-    /// </summary>
-    public bool IsFixedTab { get; set; }
-
     /// <summary>
     /// 获得/设置 是否固定页头
     /// </summary>
@@ -36,6 +30,11 @@ public sealed partial class PageLayout
     /// </summary>
     public bool IsFixedFooter { get; set; } = true;
 
+    /// <summary>
+    /// 获得/设置 是否固定页脚
+    /// </summary>
+    public bool IsFixedTabHeader { get; set; } = false;
+
     /// <summary>
     /// 获得/设置 侧边栏是否外置
     /// </summary>

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

@@ -36,9 +36,9 @@
 
     <div class="page-layout-demo-option">
         <p>@Localizer["P20"]</p>
-        <Checkbox Value="@IsFixedTab" OnStateChanged="@OnTabStateChanged" ShowAfterLabel="true" DisplayText="@Localizer["P21"]" />
-        <Checkbox Value="@IsFixedHeader" OnStateChanged="@OnHeaderStateChanged" IsDisabled="IsFixedTab" ShowAfterLabel="true" DisplayText="@Localizer["P22"]" class="mx-3" />
-        <Checkbox Value="@IsFixedFooter" OnStateChanged="@OnFooterStateChanged" IsDisabled="IsFixedTab" ShowAfterLabel="true" DisplayText="@Localizer["P23"]" />
+        <Checkbox Value="@IsFixedTabHeader" OnStateChanged="@OnTabStateChanged" ShowAfterLabel="true" DisplayText="@Localizer["P21"]" />
+        <Checkbox Value="@IsFixedHeader" OnStateChanged="@OnHeaderStateChanged" IsDisabled="IsFixedTabHeader" ShowAfterLabel="true" DisplayText="@Localizer["P22"]" class="mx-3" />
+        <Checkbox Value="@IsFixedFooter" OnStateChanged="@OnFooterStateChanged" IsDisabled="IsFixedTabHeader" ShowAfterLabel="true" DisplayText="@Localizer["P23"]" />
     </div>
 
     <div class="page-layout-demo-option">
@@ -60,7 +60,7 @@
         <div class="page-layout-demo-option">
             <p>@Localizer["P29"]</p>
             <div>@Localizer["P30"] <b><TabLink Text="@Localizer["P31"]" Url="layout-page1" Icon="fa-solid fa-font-awesome">@Localizer["P32"]</TabLink></b> @Localizer["P33"]</div>
-            <div class="mt-2">@Localizer["P34"] <Button Text="@Localizer["P35"]" Icon="fa-solid fa-font-awesome" OnClickWithoutRender="OnNavigation" /></div>
+            <div class="mt-2">@Localizer["P34"] <Button Text="@Localizer["P35"]" Icon="fa-solid fa-font-awesome" OnClickWithoutRender="OnNavigation" TooltipText="Tooltip" TooltipTrigger="hover" /></div>
         </div>
     }
 </div>

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

@@ -31,14 +31,14 @@ public sealed partial class LayoutPages
     private bool ShowFooter { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否固定 TabHeader
+    /// 获得/设置 是否固定 Header
     /// </summary>
-    private bool IsFixedTab { get; set; }
+    private bool IsFixedHeader { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否固定 Header
+    /// 获得/设置 是否固定标签页 Header
     /// </summary>
-    private bool IsFixedHeader { get; set; }
+    private bool IsFixedTabHeader { get; set; }
 
     /// <summary>
     /// 获得/设置 是否固定页脚
@@ -75,6 +75,7 @@ protected override void OnInitialized()
         IsFixedFooter = RootPage.IsFixedFooter;
         ShowFooter = RootPage.ShowFooter;
         UseTabSet = RootPage.UseTabSet;
+        IsFixedTabHeader = RootPage.IsFixedTabHeader;
 
         ActiveItem = IsFullSide ? SideBarItems[0] : SideBarItems[1];
     }
@@ -88,7 +89,7 @@ private Task OnFooterChanged(bool val)
 
     private Task OnTabStateChanged(CheckboxState state, bool val)
     {
-        IsFixedTab = val;
+        IsFixedTabHeader = val;
         Update();
         return Task.CompletedTask;
     }
@@ -133,7 +134,7 @@ public void Update()
         RootPage.IsFullSide = IsFullSide;
         RootPage.IsFixedFooter = IsFixedFooter && ShowFooter;
         RootPage.IsFixedHeader = IsFixedHeader;
-        RootPage.IsFixedTab = IsFixedTab;
+        RootPage.IsFixedTabHeader = IsFixedTabHeader;
         RootPage.ShowFooter = ShowFooter;
         RootPage.UseTabSet = UseTabSet;
         StateHasChanged();

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

@@ -136,6 +136,14 @@ private AttributeItem[] GetAttributes() =>
             DefaultValue = "false"
         },
         new()
+        {
+            Name = nameof(BootstrapBlazor.Components.Layout.IsFixedTabHeader),
+            Description = Localizer["Layouts_IsFixedTabHeader_Description"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
         {
             Name = "AdditionalAssemblies",
             Description =  Localizer["Layouts_AdditionalAssemblies_Description"],

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

@@ -1474,6 +1474,7 @@
     "Layouts_ShowFooter_Description": "Whether to show Footer template",
     "Layouts_ShowGotoTop_Description": "Whether to display the back to top button",
     "Layouts_UseTabSet_Description": "Whether to open multi-label mode",
+    "Layouts_IsFixedTabHeader_Description": "Whether to fix the Header of Tabset",
     "Layouts_AdditionalAssemblies_Description": "Collection of additional programs, passed to the Tab component for use",
     "Layouts_OnCollapsed_Description": "Contract expand callback delegate",
     "Layouts_OnClickMenu_Description": "Call back the delegate when the menu item is clicked",

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

@@ -1474,6 +1474,7 @@
     "Layouts_ShowFooter_Description": "是否显示 Footer 模板",
     "Layouts_ShowGotoTop_Description": "是否显示返回顶端按钮",
     "Layouts_UseTabSet_Description": "是否开启多标签模式",
+    "Layouts_IsFixedTabHeader_Description": "是否固定多标签 Header",
     "Layouts_AdditionalAssemblies_Description": "额外程序集合，传递给 Tab 组件使用",
     "Layouts_OnCollapsed_Description": "收缩展开回调委托",
     "Layouts_OnClickMenu_Description": "点击菜单项时回调委托",

src/BootstrapBlazor.Server/wwwroot/css/site.css

@@ -70,25 +70,9 @@ h3, h4, h5 {
     }
 
 .layout {
-    --bb-footer-height: 0px;
     --bb-layout-menu-item-hover-bg: var(--bb-primary-color);
 }
 
-    .layout.has-footer {
-        --bb-footer-height: 40px;
-    }
-
-.is-fixed-tab .tabs-body {
-    height: calc(100vh - var(--bb-layout-header-height) - var(--bb-tabs-item-height) - var(--bb-footer-height));
-    overflow: auto;
-    flex: initial;
-}
-
-    .is-fixed-tab .tabs-body .tabs-body-content {
-        height: auto;
-        min-height: 100%;
-    }
-
 .bb-sub {
     margin-top: .25rem;
     font-size: 86%;

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

@@ -108,8 +108,6 @@ public partial class Layout : IHandlerException
     /// </summary>
     /// <remarks>为真时增加 is-page 样式</remarks>
     [Parameter]
-    [Obsolete("已弃用，直接删除即可；Deprecated Please remove it")]
-    [ExcludeFromCodeCoverage]
     public bool IsPage { get; set; }
 
     /// <summary>
@@ -124,6 +122,12 @@ public partial class Layout : IHandlerException
     [Parameter]
     public bool UseTabSet { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否固定多标签 Header 默认 false
+    /// </summary>
+    [Parameter]
+    public bool IsFixedTabHeader { get; set; }
+
     /// <summary>
     /// 获得/设置 是否仅渲染 Active 标签
     /// </summary>
@@ -236,12 +240,14 @@ public partial class Layout : IHandlerException
         .AddClass("has-sidebar", Side != null && IsFullSide)
         .AddClass("has-footer", ShowFooter && Footer != null)
         .AddClass("is-collapsed", IsCollapsed)
+        .AddClass("is-fixed-tab", IsFixedTabHeader && UseTabSet)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
     private string? StyleString => CssBuilder.Default()
         .AddClass("--bb-layout-header-height: 0px;", Header == null)
         .AddClass("--bb-layout-footer-height: 0px;", ShowFooter == false || Footer == null)
+        .AddClass("--bb-layout-height: 100vh;", IsPage && UseTabSet && IsFixedTabHeader)
         .AddStyleFromAttributes(AdditionalAttributes)
         .Build();
 

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

@@ -39,7 +39,7 @@
     --bb-layout-menu-user-border-color: #{$bb-layout-menu-user-border-color};
     --bb-layout-menu-item-hover-bg: #{$bb-layout-menu-item-hover-bg};
     display: flex;
-    height: 100%;
+    height: var(--bb-layout-height, 100%);
     width: 100%;
     flex-direction: column;
     position: relative;
@@ -114,17 +114,20 @@
         bottom: 0;
         left: 0;
         right: 0;
-        z-index: 1036;
+        z-index: 5;
     }
 
     .layout-main {
         padding: 1rem;
         position: relative;
-        min-height: calc(100vh - var(--bb-layout-header-height) - var(--bb-layout-footer-height));
         flex: 1;
 
         .tabs.tabs-border-card {
             box-shadow: none;
+            margin: -1rem;
+            border: none;
+            border-radius: unset;
+            min-height: calc(100% + 2rem);
         }
     }
 
@@ -136,7 +139,7 @@
         align-items: center;
         padding: 0 1rem;
         position: sticky;
-        z-index: 1035;
+        z-index: 1090;
         border-bottom: 1px solid var(--bb-layout-header-border-color);
 
         &.is-fixed {
@@ -202,10 +205,6 @@
         }
 
         .has-sidebar {
-            .layout-side {
-                z-index: 1030;
-            }
-
             .layout-main {
                 overflow: hidden;
                 height: calc(100vh - var(--bb-layout-header-height));
@@ -223,11 +222,31 @@
         border-top: 1px solid var(--bs-border-color);
 
         &.is-fixed {
-            z-index: 1035;
+            z-index: 1090;
             position: sticky;
             bottom: 0;
         }
     }
+
+    &.is-fixed-tab {
+        .layout-main {
+            height: calc(100% - var(--bb-layout-header-height) - var(--bb-layout-footer-height));
+        }
+
+        .tabs-body {
+            height: calc(100% - var(--bb-tabs-item-height));
+            overflow: auto;
+
+            .tabs-body-content {
+                height: auto;
+                min-height: 100%;
+            }
+        }
+
+        &:not(.has-footer) {
+            --bb-layout-footer-height: 0;
+        }
+    }
 }
 
 .has-sidebar {