refactor: 增加 Toolbar 功能

Author: ArgoZhang

src/BootstrapBlazor/Components/Tab/Tab.razor

@@ -73,6 +73,17 @@ else
                 {
                     @ButtonTemplate
                 }
+                @if (ShowToolbar)
+                {
+                    <div class="tabs-nav-toolbar">
+                        @if (ShowFullscreenButton)
+                        {
+                            <div class="tabs-nav-toolbar-button">
+                                <FullScreenButton TargetId="@Id"></FullScreenButton>
+                            </div>
+                        }
+                    </div>
+                }
                 @if (ShowNavigatorButtons)
                 {
                     <div class="nav-link-bar right" @onclick="@ClickNextTab"><i class="@NextIcon"></i></div>

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

@@ -294,6 +294,18 @@ public partial class Tab : IHandlerException
     [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 whether show the full screen button. Default is true.
+    /// </summary>
+    [Parameter]
+    public bool ShowFullscreenButton { get; set; } = true;
+
     [CascadingParameter]
     private Layout? Layout { get; set; }
 

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

@@ -197,6 +197,7 @@
 }
 
 .tabs .tabs-body {
+    background-color: var(--bs-body-bg);
     padding: var(--bb-tabs-body-padding);
     flex: 1;
 }
@@ -647,28 +648,27 @@
 }
 
 .tabs {
-    &:not(.tabs-vertical) > .tabs-header .tabs-nav .tabs-nav-toolbar {
+    &:not(.tabs-vertical) > .tabs-header .tabs-nav-toolbar {
         display: flex;
     }
 
     &.tabs-bottom > .tabs-header {
-        .tabs-nav .tabs-nav-toolbar {
+        .tabs-nav-toolbar {
             border-top: 1px solid var(--bs-border-color);
         }
     }
 
     &:not(.tabs-bottom) > .tabs-header {
-        .tabs-nav .tabs-nav-toolbar {
+        .tabs-nav-toolbar {
             border-bottom: 1px solid var(--bs-border-color);
         }
     }
 
     > .tabs-header {
-        .tabs-nav .tabs-nav-toolbar {
+        .tabs-nav-toolbar {
             display: none;
             align-items: center;
             height: 100%;
-            padding-inline: 1rem;
         }
     }
 }