feat(Layout): add ShowTabInHeader parameter (#19)

* refactor: 增加 ShowTabInHeader 配置项

* refactor: 更新 Users 页面样式

* refactor: 调整 Widget 显示

Author: ArgoZhang

src/Auto-Per/BootstrapBlazorApp.Client/Pages/Users.razor

@@ -4,6 +4,14 @@
 
 <PageTitle>花名册</PageTitle>
 
+<HeadContent>
+    <style>
+        .layout-main > .tabs:has( > .tabs-header) {
+            --bb-demo-tab-header-height: 40px;
+        }
+    </style>
+</HeadContent>
+
 <div class="page-user">
     <h1>花名册</h1>
 

src/Auto-Per/BootstrapBlazorApp.Client/Pages/Users.razor.css

@@ -9,7 +9,7 @@
 }
 
 ::deep .table-users {
-    height: calc(100% - 93px);
+    height: calc(100% - 51px - var(--bb-demo-tab-header-height, 0px));
 }
 
 ::deep .table-cell img {

src/Auto-Per/BootstrapBlazorApp/Components/Layout/MainLayout.razor

@@ -5,14 +5,17 @@
         TabDefaultUrl="/" UseTabSet="false" IsFixedTabHeader="IsFixedTabHeader" Menus="Menus"
         ShowSplitebar="true" SidebarMinWidth="200" SidebarMaxWidth="350"
         TabStyle="TabStyle.Chrome" ShowToolbar="true" ShowTabContextMenu="true"
+        ShowTabInHeader="@ShowTabInHeader" ShowTabExtendButtons="false"
         AdditionalAssemblies="new[] { GetType().Assembly, typeof(BootstrapBlazorApp.Client._Imports).Assembly }"
         class="@Theme">
     <Header>
         <CollapseBar></CollapseBar>
-        <span class="ms-3 flex-sm-fill d-none d-sm-block">Bootstrap of Blazor</span>
-        <div class="flex-fill d-sm-none">
-        </div>
-        <Widget></Widget>
+        @if (ShowTabInHeader == false)
+        {
+            <span class="ms-3 flex-sm-fill d-none d-sm-block">Bootstrap of Blazor</span>
+            <div class="flex-fill d-sm-none"></div>
+            <Widget></Widget>
+        }
         <Logout ImageUrl="images/Argo-C.png" DisplayName="超级管理员" UserName="Admin">
             <LinkTemplate>
                 <a href="#"><i class="fa-solid fa-suitcase"></i>个人中心</a>

src/Auto-Per/BootstrapBlazorApp/Components/Layout/MainLayout.razor.cs

@@ -17,6 +17,8 @@ public partial class MainLayout
 
     private bool ShowFooter { get; set; } = true;
 
+    private bool ShowTabInHeader { get; set; } = true;
+
     private List<MenuItem>? Menus { get; set; }
 
     /// <summary>

src/Auto/BootstrapBlazorApp.Client/Layout/MainLayout.razor

@@ -5,13 +5,16 @@
             IsPage="true" IsFullSide="@IsFullSide" IsFixedHeader="@IsFixedHeader" IsFixedFooter="@IsFixedFooter"
             ShowSplitebar="true" SidebarMinWidth="200" SidebarMaxWidth="350"
             TabStyle="TabStyle.Chrome" ShowToolbar="true" ShowTabContextMenu="true"
+            ShowTabInHeader="@ShowTabInHeader" ShowTabExtendButtons="false"
             TabDefaultUrl="/" UseTabSet="@UseTabSet" IsFixedTabHeader="IsFixedTabHeader" AdditionalAssemblies="new[] { GetType().Assembly }"
             Menus="@Menus" class="@Theme">
         <Header>
-            <span class="ms-3 flex-sm-fill d-none d-sm-block">Bootstrap of Blazor</span>
-            <div class="flex-fill d-sm-none">
-            </div>
-            <Widget></Widget>
+            @if (ShowTabInHeader == false)
+            {
+                <span class="ms-3 flex-sm-fill d-none d-sm-block">Bootstrap of Blazor</span>
+                <div class="flex-fill d-sm-none"></div>
+                <Widget></Widget>
+            }
             <Logout ImageUrl="images/Argo-C.png" DisplayName="超级管理员" UserName="Admin">
                 <LinkTemplate>
                     <a href="#"><i class="fa-solid fa-suitcase"></i>个人中心</a>
@@ -93,6 +96,12 @@
                     <div class="col-6">
                         <span class="cell-label">固定标签页</span>
                     </div>
+                    <div class="col-6">
+                        <Switch @bind-Value="@ShowTabInHeader" OnColor="@Color.Success"></Switch>
+                    </div>
+                    <div class="col-6">
+                        <span class="cell-label">@(ShowTabInHeader ? "顶栏标签" : "正常标签")</span>
+                    </div>
                 </div>
             </GroupBox>
         </div>

src/Auto/BootstrapBlazorApp.Client/Layout/MainLayout.razor.cs

@@ -21,6 +21,8 @@ public partial class MainLayout
 
     private bool ShowFooter { get; set; } = true;
 
+    private bool ShowTabInHeader { get; set; } = true;
+
     private List<MenuItem>? Menus { get; set; }
 
     /// <summary>

src/Auto/BootstrapBlazorApp.Client/Pages/Users.razor

@@ -3,6 +3,14 @@
 
 <PageTitle>花名册</PageTitle>
 
+<HeadContent>
+    <style>
+        .layout-main > .tabs:has( > .tabs-header) {
+            --bb-demo-tab-header-height: 40px;
+        }
+    </style>
+</HeadContent>
+
 <div class="page-user">
     <h1>花名册</h1>
 

src/Auto/BootstrapBlazorApp.Client/Pages/Users.razor.css

@@ -9,7 +9,7 @@
 }
 
 ::deep .table-users {
-    height: calc(100% - 93px);
+    height: calc(100% - 51px - var(--bb-demo-tab-header-height, 0px));
 }
 
 ::deep .table-cell img {

src/Server/BootstrapBlazorApp.Server/Components/Layout/MainLayout.razor

@@ -5,19 +5,23 @@
             IsPage="true" IsFullSide="@IsFullSide" IsFixedHeader="@IsFixedHeader" IsFixedFooter="@IsFixedFooter"
             ShowSplitebar="true" SidebarMinWidth="200" SidebarMaxWidth="350"
             TabStyle="TabStyle.Chrome" ShowToolbar="true" ShowTabContextMenu="true"
-            TabDefaultUrl="/" UseTabSet="@UseTabSet" IsFixedTabHeader="IsFixedTabHeader" AdditionalAssemblies="new[] { GetType().Assembly }"
+            ShowTabInHeader="@ShowTabInHeader" ShowTabExtendButtons="false"
+            TabDefaultUrl="/" UseTabSet="@UseTabSet" IsFixedTabHeader="IsFixedTabHeader"
+            AdditionalAssemblies="new[] { GetType().Assembly }"
             Menus="@Menus" class="@Theme">
         <Header>
-            <span class="ms-3 flex-sm-fill d-none d-sm-block">Bootstrap of Blazor</span>
-            <div class="flex-fill d-sm-none">
-            </div>
-            <Widget></Widget>
+            @if (ShowTabInHeader == false)
+            {
+                <span class="ms-3 flex-sm-fill d-none d-sm-block">Bootstrap of Blazor</span>
+                <div class="flex-fill d-sm-none"></div>
+                <Widget></Widget>
+            }
             <Logout ImageUrl="images/Argo-C.png" DisplayName="超级管理员" UserName="Admin">
                 <LinkTemplate>
                     <a href="#"><i class="fa-solid fa-suitcase"></i>个人中心</a>
                     <a href="#"><i class="fa-solid fa-cog"></i>设置</a>
                     <a href="#"><i class="fa-solid fa-bell"></i>通知<span class="badge badge-pill badge-success"></span></a>
-                    <LogoutLink />
+                    <LogoutLink></LogoutLink>
                 </LinkTemplate>
             </Logout>
             <div class="layout-drawer" @onclick="@(e => IsOpen = !IsOpen)"><i class="fa fa-gears"></i></div>
@@ -40,9 +44,6 @@
                 <a class="page-layout-demo-footer-link" href="https://pro.blazor.zone/" target="_blank">Bootstrap Admin</a>
             </div>
         </Footer>
-        <NotFound>
-            <p>Sorry, there's nothing at this address.</p>
-        </NotFound>
     </Layout>
 
     <Drawer Placement="Placement.Right" @bind-IsOpen="@IsOpen" IsBackdrop="true">
@@ -96,6 +97,12 @@
                     <div class="col-6">
                         <span class="cell-label">固定标签页</span>
                     </div>
+                    <div class="col-6">
+                        <Switch @bind-Value="@ShowTabInHeader" OnColor="@Color.Success"></Switch>
+                    </div>
+                    <div class="col-6">
+                        <span class="cell-label">@(ShowTabInHeader ? "顶栏标签" : "正常标签")</span>
+                    </div>
                 </div>
             </GroupBox>
         </div>

src/Server/BootstrapBlazorApp.Server/Components/Layout/MainLayout.razor.cs

@@ -24,6 +24,8 @@ public sealed partial class MainLayout
 
     private bool ShowFooter { get; set; } = true;
 
+    private bool ShowTabInHeader { get; set; } = true;
+
     private List<MenuItem>? Menus { get; set; }
 
     /// <summary>