feat: tabs 视觉升级

ant-design · Sep 20, 2024 · 3e0d7da · 3e0d7da
1 parent d212287
commit 3e0d7da
Show file tree

Hide file tree

Showing 15 changed files with 184 additions and 72 deletions.
diff --git a/compiled/alipay/demo/pages/Tabs/index.axml b/compiled/alipay/demo/pages/Tabs/index.axml
@@ -12,12 +12,25 @@
     </view>
   </tabs>
 </container>
-<container title="胶囊">
+<container title="胶囊-自定义标题">
   <tabs
     type="capsule"
-    items="{{items}}"
+    items="{{items3}}"
     defaultCurrent="{{1}}"
-  ></tabs>
+  >
+    <block
+      slot="title"
+      slot-scope="item"
+    >
+      <block a:if="{{item.index > 3}}">
+        {{item.value.title}}
+      </block>
+      <block a:else>
+        {{item.value.title}}
+        <text class="extra-title">({{item.index}})</text>
+      </block>
+    </block>
+  </tabs>
 </container>
 <container title="带副标题">
   <tabs
@@ -48,7 +61,7 @@
   ></tabs>
 </container>
 <container title="plus按钮">
-  <tabs items="{{items}}">
+  <tabs items="{{items3}}">
     <view slot="plus">
       <icon
         type="AddOutline"

diff --git a/compiled/alipay/demo/pages/Tabs/index.js b/compiled/alipay/demo/pages/Tabs/index.js
@@ -37,6 +37,29 @@ Page({
                 content: '蚂蚁',
             },
         ],
+        items3: [
+            {
+                title: '选项一',
+            },
+            {
+                title: '选项二',
+            },
+            {
+                title: '选项三',
+            },
+            {
+                title: '选项四',
+            },
+            {
+                title: '选项五',
+            },
+            {
+                title: '选项六',
+            },
+            {
+                title: '选项七',
+            },
+        ],
     },
     onChange(current) {
         this.alert('current ' + current);

diff --git a/compiled/alipay/demo/pages/Tabs/index.less b/compiled/alipay/demo/pages/Tabs/index.less
@@ -2,3 +2,12 @@
   color: red;
   padding: 12px;
 }
+
+.extra-title {
+  opacity: 0.6;
+  font-weight: 500;
+  font-size: 26rpx;
+  color: #999999;
+  text-align: center;
+  padding-left: 8rpx;
+}
diff --git a/compiled/alipay/src/Tabs/index.axml b/compiled/alipay/src/Tabs/index.axml
@@ -127,7 +127,7 @@
           <view
             id="ant-tabs-bar-item{{$id ? '-' + $id : ''}}-{{index}}"
             class="ant-vtabs-bar-item {{tabClassName ? tabClassName : ''}} {{mixin.value === index && !item.disabled ? 'ant-vtabs-bar-item-active' : ''}} {{item.disabled ? 'ant-vtabs-bar-item-disabled' : ''}} {{mixin.value === index && !item.disabled && tabActiveClassName ? tabActiveClassName : ''}}"
-            style="{{mixin.value + 1 === index ? 'border-radius: 0 16rpx 0 0' : ''}};{{mixin.value - 1 === index ? 'border-radius: 0 0 16rpx 0' : ''}}"
+            style="{{mixin.value + 1 === index ? 'border-radius: 0 24rpx 0 0' : ''}};{{mixin.value - 1 === index ? 'border-radius: 0 0 16rpx 0' : ''}}"
             onTap="onChange"
             data-index="{{index}}"
           >

diff --git a/compiled/alipay/src/Tabs/index.less b/compiled/alipay/src/Tabs/index.less
@@ -4,16 +4,17 @@
 
 .@{tabsPrefix} {
   width: 100%;
+  line-height: 1.4;
   &-bar {
     position: relative;
     width: 100%;
     display: flex;
     align-content: stretch;
     background-color: @tabs-inverse-color;
     box-sizing: border-box;
-    &-underline {
-      border-bottom: @border-width-standard solid @COLOR_BORDER;
-    }
+    // &-underline {
+    //   // border-bottom: @border-width-standard solid @COLOR_BORDER;
+    // }
     &-fade {
       position: absolute;
       top: 0;
@@ -107,13 +108,16 @@
       position: relative;
       display: flex;
       align-items: center;
-      padding: @v-spacing-standard @h-spacing-large;
+      padding: 20 * @rpx;
       box-sizing: border-box;
     }
 
     &-basic&-active {
       color: @tabs-active-color;
       position: relative;
+      .ant-tabs-bar-basic-title {
+        font-weight: 500;
+      }
       &:after {
         content: '';
         position: absolute;
@@ -139,9 +143,8 @@
         justify-content: center;
         margin-right: 0;
         padding: @v-spacing-standard 30 * @rpx;
-        font-size: 30 * @rpx;
+        font-size: 16 * @rpx 30 * @rpx;
         text-align: center;
-        line-height: @line-height-base;
         border-radius: 10vh;
         background-color: @COLOR_GREY_CARD;
         border-bottom: 0 none;
@@ -159,22 +162,21 @@
       padding: @v-spacing-large 0;
       text-align: center;
       &-title {
-        margin: 2 * @rpx 0;
         position: relative;
       }
 
       &-subtitle {
         padding: 0 @h-spacing-standard;
         font-size: @font-size-content;
-        line-height: @line-height-paragraph;
+        line-height: 37 * @rpx;
         color: @tabs-weaken-color;
         border-radius: 50vh;
         background-color: @COLOR_GREY_CARD;
-        margin: 2 * @rpx 0;
       }
     }
     &-mixin&-active &-mixin-title {
       color: @tabs-active-color;
+      font-weight: 500;
     }
     &-mixin&-active &-mixin-subtitle {
       color: @COLOR_WHITE;
@@ -199,6 +201,7 @@
 .@{vtabsPrefix} {
   width: 100%;
   display: flex;
+  line-height: 1.4;
   flex-direction: row;
   &-bar {
     width: 210 * @rpx;
@@ -216,7 +219,7 @@
     &-item {
       position: relative;
       width: 100%;
-      padding: @size-4 @h-spacing-large;
+      padding: 30 * @rpx 60 * @rpx;
       overflow: hidden;
       display: flex;
       align-items: center;
@@ -232,15 +235,8 @@
       &-active {
         color: @COLOR_BRAND1;
         background-color: @COLOR_CARD;
-        &::after {
-          position: absolute;
-          content: '';
-          top: @size-4;
-          bottom: @size-4;
-          left: 0;
-          width: @border-width-thick;
-          border-radius: @corner-radius-sm;
-          background-color: @COLOR_BRAND1;
+        .ant-vtabs-bar-item-title {
+          font-weight: 500;
         }
       }
       &-disabled {

diff --git a/compiled/wechat/demo/pages/Tabs/index.js b/compiled/wechat/demo/pages/Tabs/index.js
@@ -37,6 +37,29 @@ Page({
                 content: '蚂蚁',
             },
         ],
+        items3: [
+            {
+                title: '选项一',
+            },
+            {
+                title: '选项二',
+            },
+            {
+                title: '选项三',
+            },
+            {
+                title: '选项四',
+            },
+            {
+                title: '选项五',
+            },
+            {
+                title: '选项六',
+            },
+            {
+                title: '选项七',
+            },
+        ],
     },
     onChange(current) {
         current = current.detail;

diff --git a/compiled/wechat/demo/pages/Tabs/index.wxml b/compiled/wechat/demo/pages/Tabs/index.wxml
@@ -1,12 +1,21 @@
 <container title="基础用法">
   <tabs items="{{items}}"></tabs>
 </container>
-<container title="胶囊">
+<container title="胶囊-自定义标题">
   <tabs
     type="capsule"
-    items="{{items}}"
+    items="{{items3}}"
     defaultCurrent="{{1}}"
-  ></tabs>
+  >
+    <block
+      slot="title"
+      slot-scope="item"
+    >
+      <block wx:if="{{item.index > 3}}">{{item.value.title}}</block>
+      <block wx:else>{{item.value.title}}<text class="extra-title">({{item.index}})</text>
+      </block>
+    </block>
+  </tabs>
 </container>
 <container title="带副标题">
   <tabs
@@ -24,7 +33,7 @@
   ></tabs>
 </container>
 <container title="plus按钮">
-  <tabs items="{{items}}">
+  <tabs items="{{items3}}">
     <view slot="plus">
       <icon
         type="AddOutline"

diff --git a/compiled/wechat/demo/pages/Tabs/index.wxss b/compiled/wechat/demo/pages/Tabs/index.wxss
@@ -2,3 +2,11 @@
   color: red;
   padding: 12px;
 }
+.extra-title {
+  opacity: 0.6;
+  font-weight: 500;
+  font-size: 26rpx;
+  color: #999999;
+  text-align: center;
+  padding-left: 8rpx;
+}
diff --git a/compiled/wechat/src/Tabs/index.wxml b/compiled/wechat/src/Tabs/index.wxml
@@ -98,7 +98,7 @@
           <view
             id="ant-tabs-bar-item{{$id ? '-' + $id : ''}}-{{index}}"
             class="ant-vtabs-bar-item {{tabClassName ? tabClassName : ''}} {{mixin.value === index && !item.disabled ? 'ant-vtabs-bar-item-active' : ''}} {{item.disabled ? 'ant-vtabs-bar-item-disabled' : ''}} {{mixin.value === index && !item.disabled && tabActiveClassName ? tabActiveClassName : ''}}"
-            style="{{mixin.value + 1 === index ? 'border-radius: 0 16rpx 0 0' : ''}};{{mixin.value - 1 === index ? 'border-radius: 0 0 16rpx 0' : ''}}"
+            style="{{mixin.value + 1 === index ? 'border-radius: 0 24rpx 0 0' : ''}};{{mixin.value - 1 === index ? 'border-radius: 0 0 16rpx 0' : ''}}"
             bind:tap="onChange"
             data-index="{{index}}"
           >

diff --git a/compiled/wechat/src/Tabs/index.wxss b/compiled/wechat/src/Tabs/index.wxss
@@ -1,5 +1,6 @@
 .ant-tabs {
   width: 100%;
+  line-height: 1.4;
 }
 .ant-tabs-bar {
   position: relative;
@@ -9,9 +10,6 @@
   background-color: #ffffff;
   box-sizing: border-box;
 }
-.ant-tabs-bar-underline {
-  border-bottom: 1px solid #eeeeee;
-}
 .ant-tabs-bar-fade {
   display: none;
   position: absolute;
@@ -90,13 +88,16 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: 8px 12px;
+  padding: 10px;
   box-sizing: border-box;
 }
 .ant-tabs-bar-basic.ant-tabs-bar-active {
   color: #1677ff;
   position: relative;
 }
+.ant-tabs-bar-basic.ant-tabs-bar-active .ant-tabs-bar-basic-title {
+  font-weight: 500;
+}
 .ant-tabs-bar-basic.ant-tabs-bar-active:after {
   content: '';
   position: absolute;
@@ -120,9 +121,8 @@
   justify-content: center;
   margin-right: 0;
   padding: 8px 15px;
-  font-size: 15px;
+  font-size: 8px 15px;
   text-align: center;
-  line-height: 1;
   border-radius: 10vh;
   background-color: #f5f5f5;
   border-bottom: 0 none;
@@ -138,20 +138,19 @@
   text-align: center;
 }
 .ant-tabs-bar-mixin-title {
-  margin: 1px 0;
   position: relative;
 }
 .ant-tabs-bar-mixin-subtitle {
   padding: 0 8px;
   font-size: 13px;
-  line-height: 1.5;
+  line-height: 18.5px;
   color: #999999;
   border-radius: 50vh;
   background-color: #f5f5f5;
-  margin: 1px 0;
 }
 .ant-tabs-bar-mixin.ant-tabs-bar-active .ant-tabs-bar-mixin-title {
   color: #1677ff;
+  font-weight: 500;
 }
 .ant-tabs-bar-mixin.ant-tabs-bar-active .ant-tabs-bar-mixin-subtitle {
   color: #ffffff;
@@ -170,6 +169,7 @@
 .ant-vtabs {
   width: 100%;
   display: flex;
+  line-height: 1.4;
   flex-direction: row;
 }
 .ant-vtabs-bar {
@@ -189,7 +189,7 @@
 .ant-vtabs-bar-item {
   position: relative;
   width: 100%;
-  padding: 16px 12px;
+  padding: 15px 30px;
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -207,15 +207,8 @@
   color: #1677ff;
   background-color: #ffffff;
 }
-.ant-vtabs-bar-item-active::after {
-  position: absolute;
-  content: '';
-  top: 16px;
-  bottom: 16px;
-  left: 0;
-  width: 2px;
-  border-radius: 2px;
-  background-color: #1677ff;
+.ant-vtabs-bar-item-active .ant-vtabs-bar-item-title {
+  font-weight: 500;
 }
 .ant-vtabs-bar-item-disabled {
   pointer-events: none;