feat(Tab): update style compatible with new feature (#5392)

* feat: 增加 UseCache 参数

* refactor: 显示控制逻辑

* refactor: 重构代码

* test: 增加单元测试

* refactor: 更新样式使用 flex 布局

* refactor: 更新脚本

Author: ArgoZhang

src/BootstrapBlazor/Components/Tab/Tab.razor.js

@@ -13,6 +13,12 @@ const resize = tab => {
     if (wrap.classList.contains('extend')) {
         return
     }
+
+    const link = wrap.querySelector('.nav-link-bar');
+    if (link === null) {
+        return;
+    }
+
     const scroll = tab.scroll
     const lastItem = [...tabNav.querySelectorAll('.tabs-item')].pop()
     if (lastItem) {

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

@@ -45,6 +45,8 @@
 .tabs-nav-wrap {
     position: relative;
     height: var(--bb-tabs-item-height);
+    display: flex;
+    align-items: center;
 
     > .dropdown-toggle {
         &:after {
@@ -62,17 +64,15 @@
 }
 
 .tabs-nav-scroll {
-    position: absolute;
     overflow: hidden;
-    left: 0;
-    right: 0;
     height: 100%;
     border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
+    flex: 1;
+    width: 1%;
+    min-width: 0;
 }
 
 .extend .tabs-nav-scroll {
-    left: var(--bb-tabs-bar-width);
-    right: calc(2 * var(--bb-tabs-bar-width));
     border-radius: 0;
 }
 
@@ -85,7 +85,6 @@
 
 .tabs-nav-wrap {
     > .nav-link-bar {
-        position: absolute;
         cursor: pointer;
         font-size: 1rem;
         color: var(--bs-body-color);
@@ -98,20 +97,14 @@
 
         &.left {
             border-width: 0;
-            left: 0;
-            top: 0;
         }
 
         &.right {
             border-width: 0;
-            right: var(--bb-tabs-bar-width);
-            top: 0;
         }
 
         &.dropdown {
             border-width: 0 0 1px 1px;
-            right: 0;
-            top: 0;
             border-radius: 0 var(--bs-border-radius) 0 0;
         }
     }
@@ -130,19 +123,13 @@
 }
 
 .tabs .of .tabs-nav-scroll {
-    left: var(--bb-tabs-bar-width);
-    right: var(--bb-tabs-bar-width);
     border-radius: 0;
 }
 
 .tabs .of .nav-link-bar {
     display: flex;
 }
 
-.tabs .of .nav-link-bar.right {
-    right: 0;
-}
-
 .tabs .tabs-active-bar {
     position: absolute;
     bottom: 0;
@@ -367,6 +354,7 @@
 
 .tabs.tabs-vertical > .tabs-header .tabs-nav-wrap {
     height: 100%;
+    flex-direction: column;
 }
 
 .tabs.tabs-vertical > .tabs-header .tabs-nav-wrap:after {
@@ -389,16 +377,9 @@
 
 .tabs.tabs-vertical > .tabs-header .tabs-nav-scroll {
     border-radius: 0;
-    top: 0;
-    bottom: 0;
-    height: auto;
-}
-
-.tabs.tabs-vertical > .tabs-header .of .tabs-nav-scroll {
-    top: var(--bb-tabs-bar-height);
-    bottom: var(--bb-tabs-bar-height);
-    left: 0;
-    right: 0;
+    height: 1%;
+    min-height: 0;
+    width: 100%;
 }
 
 .tabs.tabs-vertical > .tabs-header .tabs-active-bar {
@@ -477,14 +458,6 @@
     width: 100%;
 }
 
-.tabs.tabs-vertical > .tabs-header .nav-link-bar.left {
-}
-
-.tabs.tabs-vertical > .tabs-header .nav-link-bar.right {
-    top: auto;
-    bottom: 0;
-}
-
 .tabs.tabs-right > .tabs-header .tabs-active-bar {
     right: auto;
     left: 0;