fix(tab-bar): update style (#1369)

Tencent · Dec 31, 2022 · b2bbf85 · b2bbf85
1 parent 805c250
commit b2bbf85
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 51 deletions.
diff --git a/src/tab-bar/__test__/__snapshots__/demo.test.js.snap b/src/tab-bar/__test__/__snapshots__/demo.test.js.snap
@@ -75,7 +75,7 @@ exports[`TabBar TabBar base demo works fine 1`] = `
       value="label_2"
     >
       
-    软件
+    应用
   
     </t-tab-bar-item>
     <t-tab-bar-item
@@ -222,41 +222,41 @@ exports[`TabBar TabBar sub demo works fine 1`] = `
   >
     <t-tab-bar-item
       subTabBar=""
-      value="label_1"
+      value="home"
     >
       
-    标签一
+    首页
   
     </t-tab-bar-item>
     <t-tab-bar-item
       subTabBar=""
-      value="label_2"
+      value="app"
     >
       
-    标签二
+    应用
   
     </t-tab-bar-item>
     <t-tab-bar-item
       subTabBar="{{
         Array [
           Object {
-            "label": "展开项三",
-            "value": "spread_3",
+            "label": "基本信息",
+            "value": "info",
           },
           Object {
-            "label": "展开项二",
-            "value": "spread_2",
+            "label": "个人主页",
+            "value": "home-page",
           },
           Object {
-            "label": "展开项一",
-            "value": "spread_1",
+            "label": "设置",
+            "value": "setting",
           },
         ]
       }}"
-      value="label_3"
+      value="user"
     >
       
-    展开项
+    我的
   
     </t-tab-bar-item>
   </t-tab-bar>
@@ -268,28 +268,28 @@ exports[`TabBar TabBar text-only demo works fine 1`] = `
   <t-tab-bar
     split="{{false}}"
     theme="tag"
-    value="label_1"
+    value="home"
     bind:change="onChange"
   >
     <t-tab-bar-item
-      value="label_1"
+      value="home"
     >
-       标签一 
+       首页 
     </t-tab-bar-item>
     <t-tab-bar-item
-      value="label_2"
+      value="app"
     >
-       标签二 
+       应用 
     </t-tab-bar-item>
     <t-tab-bar-item
-      value="label_3"
+      value="chat"
     >
-       标签三 
+       聊天 
     </t-tab-bar-item>
     <t-tab-bar-item
-      value="label_4"
+      value="user"
     >
-       标签四 
+       我的 
     </t-tab-bar-item>
   </t-tab-bar>
 </text-only>

diff --git a/src/tab-bar/_example/base/index.js b/src/tab-bar/_example/base/index.js
@@ -3,7 +3,7 @@ Component({
     value: 'label_1',
     list: [
       { value: 'label_1', label: '首页', icon: 'home' },
-      { value: 'label_2', label: '软件', icon: 'app' },
+      { value: 'label_2', label: '应用', icon: 'app' },
       { value: 'label_3', label: '聊天', icon: 'chat' },
       { value: 'label_4', label: '我的', icon: 'user' },
     ],

diff --git a/src/tab-bar/_example/custom/index.wxss b/src/tab-bar/_example/custom/index.wxss
@@ -1,5 +1,5 @@
 .wrapper {
-  --td-tab-bar-border-color: gray;
+  --td-tab-bar-border-color: #e7e7e7;
   --td-tab-bar-bg-color: #eee;
   --td-tab-bar-hover-color: #ddd;
   --td-tab-bar-item-color: #bbb;

diff --git a/src/tab-bar/_example/sub/index.js b/src/tab-bar/_example/sub/index.js
@@ -1,29 +1,29 @@
 const list = [
   {
-    value: 'label_1',
-    label: '标签一',
-    icon: 'app',
+    value: 'home',
+    label: '首页',
+    icon: 'home',
   },
   {
-    value: 'label_2',
-    label: '标签二',
+    value: 'app',
+    label: '应用',
     icon: 'app',
   },
   {
-    value: 'label_3',
-    label: '展开项',
+    value: 'user',
+    label: '我的',
     children: [
       {
-        value: 'spread_3',
-        label: '展开项三',
+        value: 'info',
+        label: '基本信息',
       },
       {
-        value: 'spread_2',
-        label: '展开项二',
+        value: 'home-page',
+        label: '个人主页',
       },
       {
-        value: 'spread_1',
-        label: '展开项一',
+        value: 'setting',
+        label: '设置',
       },
     ],
   },

diff --git a/src/tab-bar/_example/text-only/index.js b/src/tab-bar/_example/text-only/index.js
@@ -1,11 +1,11 @@
 Component({
   data: {
-    value: 'label_1',
+    value: 'home',
     list: [
-      { value: 'label_1', label: '标签一' },
-      { value: 'label_2', label: '标签二' },
-      { value: 'label_3', label: '标签三' },
-      { value: 'label_4', label: '标签四' },
+      { value: 'home', label: '首页' },
+      { value: 'app', label: '应用' },
+      { value: 'chat', label: '聊天' },
+      { value: 'user', label: '我的' },
     ],
   },
 

diff --git a/src/tab-bar/tab-bar-item.less b/src/tab-bar/tab-bar-item.less
@@ -27,14 +27,13 @@
   padding: 0 24rpx;
 
   &--text-only {
-    height: 64rpx;
     font-size: 32rpx;
   }
 
   &--split:before {
     .hairline-left(@color: @tab-bar-border-color);
-    top: 8px;
-    bottom: 8px;
+    top: 16rpx;
+    bottom: 16rpx;
   }
 
   &--crowded {
@@ -82,8 +81,8 @@
     align-items: center;
 
     &--small {
-      font-size: 10px;
-      line-height: 36rpx;
+      font-size: 20rpx;
+      line-height: 32rpx;
     }
   }
 
@@ -97,7 +96,7 @@
     left: 7%;
     width: 86%;
     background-color: @tab-bar-bg-color;
-    transform: translate3d(0, calc(-100% - 16px), 0);
+    transform: translate3d(0, calc(-100% - 32rpx), 0);
     z-index: 1;
     border-radius: 12rpx;
     color: @tab-bar-color;
@@ -111,9 +110,9 @@
       left: 50%;
       width: 0;
       height: 0;
-      border: 8px solid transparent;
-      border-top: 8px solid @tab-bar-bg-color;
-      transform: translate3d(-50%, 16px, 0);
+      border: 16rpx solid transparent;
+      border-top: 16rpx solid @tab-bar-bg-color;
+      transform: translate3d(-50%, 32rpx, 0);
     }
 
     &-item {