fix(tabs): 修订左对齐样式 (jdf2e#1929)

* fix(Tabs): 修订左对齐样式 * fix(Tabs): 去掉 taro 的差异化处理
Alex-huxiyang · Feb 4, 2024 · 01c9e9b · 01c9e9b
1 parent 2df87b3
commit 01c9e9b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss
@@ -29,10 +29,16 @@
 
   &-left {
     justify-content: flex-start;
+    .nut-tabs-titles-item {
+      padding: 0 10px;
+    }
   }
 
   &-right {
     justify-content: flex-end;
+    .nut-tabs-titles-item {
+      padding: 0 10px;
+    }
   }
 
   &-scrollable {
@@ -46,19 +52,15 @@
     align-items: center;
     justify-content: center;
     flex: 1 0 auto;
-    padding: 0 10px;
     margin: 0 $tabs-titles-gap;
+    height: $tabs-titles-height;
+    line-height: $tabs-titles-height;
     min-width: $tabs-titles-item-min-width;
     font-size: $tabs-titles-font-size;
     color: $tabs-titles-item-color;
     text-overflow: ellipsis;
     white-space: nowrap;
 
-    &.taro {
-      height: 44px;
-      line-height: 44px;
-    }
-
     &-left,
     &-right {
       flex: none;
@@ -121,6 +123,10 @@
     &:first-child {
       margin-left: 0;
     }
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
 
   &-simple {
@@ -148,10 +154,7 @@
   &-button {
     .nut-tabs-titles-item {
       &-active {
-        &.taro {
-          height: 28px;
-        }
-
+        height: 28px;
         margin: 8px 9px;
         background: $color-default-light;
         color: $color-text;
@@ -262,6 +265,7 @@
 
   .nut-tabs-titles-item {
     height: $tabs-vertical-titles-item-height;
+    margin: 0;
     flex: none;
 
     &-smile {
@@ -301,10 +305,6 @@
         transform: rotate(320deg);
       }
     }
-
-    &:first-child {
-      margin: 0 $tabs-titles-gap;
-    }
   }
 
   .nut-tabs-horizontal {

diff --git a/src/packages/tabs/tabs.taro.tsx b/src/packages/tabs/tabs.taro.tsx
@@ -271,7 +271,7 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
                     onClick={(e) => {
                       tabChange(item, index)
                     }}
-                    className={classNames(`${classPrefix}-titles-item taro`, {
+                    className={classNames(`${classPrefix}-titles-item`, {
                       [`nut-tabs-titles-item-active`]:
                         !item.disabled && String(item.value) === String(value),
                       [`nut-tabs-titles-item-disabled`]: item.disabled,