feat: 增加 Capsule 模式

Author: ArgoZhang

src/BootstrapBlazor/Components/Tab/Tab.razor

@@ -129,8 +129,11 @@ else
         <div role="tab" class="@GetClassString(item)">
             @RenderHeaderContent(item)
         </div>
-        <i class="tab-corner tab-corner-left"></i>
-        <i class="tab-corner tab-corner-right"></i>
+        @if (TabStyle == TabStyle.Chrome)
+        {
+            <i class="tab-corner tab-corner-left"></i>
+            <i class="tab-corner tab-corner-right"></i>
+        }
     </div>;
 
     RenderFragment RenderDefaultDisabledHeader(TabItem item) =>
@@ -143,8 +146,11 @@ else
         <a href="@item.Url" role="tab" tabindex="-1" class="@GetClassString(item)" @onclick="@(() => OnClickTabItem(item))" @onclick:preventDefault="@(!ClickTabToNavigation)" draggable="@DraggableString">
             @RenderHeaderContent(item)
         </a>
-        <i class="tab-corner tab-corner-left"></i>
-        <i class="tab-corner tab-corner-right"></i>
+        @if (TabStyle == TabStyle.Chrome)
+        {
+            <i class="tab-corner tab-corner-left"></i>
+            <i class="tab-corner tab-corner-right"></i>
+        }
     </div>;
 
     RenderFragment RenderDefaultHeader(TabItem item) =>

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

@@ -45,6 +45,7 @@ public partial class Tab : IHandlerException
         .AddClass($"tabs-{Placement.ToDescriptionString()}", Placement == Placement.Top || Placement == Placement.Right || Placement == Placement.Bottom || Placement == Placement.Left)
         .AddClass("tabs-vertical", Placement == Placement.Left || Placement == Placement.Right)
         .AddClass("tabs-chrome", TabStyle == TabStyle.Chrome)
+        .AddClass("tabs-capsule", TabStyle == TabStyle.Capsule)
        .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
@@ -878,9 +879,9 @@ public async Task DragItemCallback(int originIndex, int currentIndex)
 
     private string? GetIdByTabItem(TabItem item) => (ShowFullScreen && item.ShowFullScreen) ? ComponentIdGenerator.Generate(item) : null;
 
-    private RenderFragment RenderDisabledHeaderByStyle(TabItem item) => TabStyle == TabStyle.Chrome ? RenderChromeDisabledHeader(item) : RenderDefaultDisabledHeader(item);
+    private RenderFragment RenderDisabledHeaderByStyle(TabItem item) => TabStyle == TabStyle.Default ? RenderDefaultDisabledHeader(item) : RenderChromeDisabledHeader(item);
 
-    private RenderFragment RenderHeaderByStyle(TabItem item) => TabStyle == TabStyle.Chrome ? RenderChromeHeader(item) : RenderDefaultHeader(item);
+    private RenderFragment RenderHeaderByStyle(TabItem item) => TabStyle == TabStyle.Default ? RenderDefaultHeader(item) : RenderChromeHeader(item);
 
     /// <summary>
     /// <inheritdoc/>

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

@@ -488,17 +488,20 @@
     }
 }
 
-.tabs-chrome {
+.tabs-chrome > .tabs-header {
     --bb-tabs-header-bg-color: var(--bs-border-color);
     --bb-tabs-item-hover-bg-color: rgba(var(--bs-body-color-rgb), 0.1);
     --bb-tabs-item-active-bg-color: var(--bs-body-bg);
     --bb-tabs-item-active-color: var(--bs-body-color);
     --bb-tabs-item-hover-color: var(--bs-body-color);
 
+    .tabs-nav {
+        background-color: var(--bb-tabs-header-bg-color);
+    }
+
     .tabs-item-wrap {
         overflow: hidden;
         position: relative;
-        background-color: var(--bb-tabs-header-bg-color);
         display: flex;
         align-items: flex-end;
         flex-shrink: 0;
@@ -531,7 +534,6 @@
         }
 
         .tabs-item {
-            background-color: var(--bb-tabs-header-bg-color);
             border: none !important;
             border-top-left-radius: 10px;
             border-top-right-radius: 10px;
@@ -598,8 +600,77 @@
         }
     }
 
-    > .tabs-header .tabs-item-fix {
+    .tabs-item-fix {
+        border: none;
+    }
+}
+
+.tabs-capsule > .tabs-header {
+    --bb-tabs-header-bg-color: var(--bs-border-color);
+    --bb-tabs-item-bg-color: rgba(var(--bs-body-color-rgb), 0.08);
+    --bb-tabs-item-hover-bg-color: rgba(var(--bs-body-color-rgb), 0.1);
+    --bb-tabs-item-active-bg-color: var(--bs-body-bg);
+    --bb-tabs-item-active-color: var(--bs-body-color);
+    --bb-tabs-item-hover-color: var(--bs-body-color);
+
+    .tabs-nav {
         background-color: var(--bb-tabs-header-bg-color);
+    }
+
+    .tabs-item-wrap {
+        margin-left: .5rem;
+
+        &.active {
+            .tabs-item {
+                .tabs-item-body {
+                    background-color: var(--bb-tabs-item-active-bg-color);
+                }
+            }
+        }
+
+        &:not(.active) {
+            .tabs-item:not(.disabled) .tabs-item-body {
+                &:hover {
+                    background-color: var(--bb-tabs-item-hover-bg-color);
+                }
+            }
+        }
+
+        .tabs-item {
+            padding: 0;
+
+            .tabs-item-body {
+                padding: 4px 10px;
+                display: flex;
+                align-items: center;
+                flex-wrap: nowrap;
+                border-radius: 14.5px;
+                background-color: var(--bb-tabs-item-bg-color);
+
+                .tabs-item-text {
+                    padding: 0 .5rem;
+                }
+
+                .tabs-item-close {
+                    display: flex;
+                    position: unset;
+                    width: 21px;
+                    height: 21px;
+                    border-radius: 50%;
+                }
+            }
+
+            .tabs-item-close {
+                display: flex;
+                position: unset;
+                width: 21px;
+                height: 21px;
+                border-radius: 50%;
+            }
+        }
+    }
+
+    .tabs-item-fix {
         border: none;
     }
 }

src/BootstrapBlazor/Enums/TabStyle.cs

@@ -18,5 +18,10 @@ public enum TabStyle
     /// <summary>
     /// The Chrome style
     /// </summary>
-    Chrome
+    Chrome,
+
+    /// <summary>
+    /// The Capsule style
+    /// </summary>
+    Capsule
 }