From 4f9eeec75216a5953845ff7434ce03f8c1e125ce Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 13 Aug 2020 20:50:53 +0800 Subject: [PATCH] style(Tabs): adjust default line-width to 40px (#7002) --- .../test/__snapshots__/demo.spec.js.snap | 2 +- .../test/__snapshots__/demo.spec.js.snap | 2 +- src/list/test/__snapshots__/demo.spec.js.snap | 2 +- .../test/__snapshots__/demo.spec.js.snap | 2 +- src/style/var.less | 1 + src/tab/README.md | 2 +- src/tab/README.zh-CN.md | 4 ++-- src/tab/test/__snapshots__/demo.spec.js.snap | 22 +++++++++---------- src/tab/test/__snapshots__/index.spec.js.snap | 10 ++++----- .../test/__snapshots__/insert.spec.js.snap | 2 +- src/tabs/index.js | 3 +-- src/tabs/index.less | 1 + 12 files changed, 27 insertions(+), 26 deletions(-) diff --git a/src/empty/test/__snapshots__/demo.spec.js.snap b/src/empty/test/__snapshots__/demo.spec.js.snap index 438b1aa9b..0537f43af 100644 --- a/src/empty/test/__snapshots__/demo.spec.js.snap +++ b/src/empty/test/__snapshots__/demo.spec.js.snap @@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = ` -
+
diff --git a/src/index-bar/test/__snapshots__/demo.spec.js.snap b/src/index-bar/test/__snapshots__/demo.spec.js.snap index a0fb3099c..caa480f26 100644 --- a/src/index-bar/test/__snapshots__/demo.spec.js.snap +++ b/src/index-bar/test/__snapshots__/demo.spec.js.snap @@ -7,7 +7,7 @@ exports[`renders demo correctly 1`] = `
-
+
diff --git a/src/list/test/__snapshots__/demo.spec.js.snap b/src/list/test/__snapshots__/demo.spec.js.snap index 9d73814a2..6ecfc6f12 100644 --- a/src/list/test/__snapshots__/demo.spec.js.snap +++ b/src/list/test/__snapshots__/demo.spec.js.snap @@ -8,7 +8,7 @@ exports[`renders demo correctly 1`] = ` -
+
diff --git a/src/pull-refresh/test/__snapshots__/demo.spec.js.snap b/src/pull-refresh/test/__snapshots__/demo.spec.js.snap index e7f59b83c..ab7e8350b 100644 --- a/src/pull-refresh/test/__snapshots__/demo.spec.js.snap +++ b/src/pull-refresh/test/__snapshots__/demo.spec.js.snap @@ -8,7 +8,7 @@ exports[`renders demo correctly 1`] = ` -
+
diff --git a/src/style/var.less b/src/style/var.less index 6f64feb27..a40138923 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -770,6 +770,7 @@ @tabs-line-height: 44px; @tabs-card-height: 30px; @tabs-nav-background-color: @white; +@tabs-bottom-bar-width: 40px; @tabs-bottom-bar-height: 3px; @tabs-bottom-bar-color: @tabs-default-color; diff --git a/src/tab/README.md b/src/tab/README.md index ca954b084..1c1d7f17a 100644 --- a/src/tab/README.md +++ b/src/tab/README.md @@ -224,7 +224,7 @@ export default { | color | Tab color | _string_ | `#ee0a24` | | background | Background color | _string_ | `white` | | duration | Toggle tab's animation time | _number \| string_ | `0.3` | - | -| line-width | Width of tab line | _number \| string_ | Width of active tab | +| line-width | Width of tab line | _number \| string_ | `40px` | | line-height | Height of tab line | _number \| string_ | `3px` | | animated | Whether to change tabs with animation | _boolean_ | `false` | | border | Whether to show border when `type="line"` | _boolean_ | `false` | diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md index 162c7c152..aecbc8430 100644 --- a/src/tab/README.zh-CN.md +++ b/src/tab/README.zh-CN.md @@ -231,8 +231,8 @@ export default { | color | 标签主题色 | _string_ | `#ee0a24` | | background | 标签栏背景色 | _string_ | `white` | | duration | 动画时间，单位秒 | _number \| string_ | `0.3` | -| line-width | 底部条宽度，默认单位`px` | _number \| string_ | `auto` | -| line-height | 底部条高度，默认单位`px` | _number \| string_ | `3px` | +| line-width | 底部条宽度，默认单位 `px` | _number \| string_ | `40px` | +| line-height | 底部条高度，默认单位 `px` | _number \| string_ | `3px` | | animated | 是否开启切换标签内容时的转场动画 | _boolean_ | `false` | | border | 是否显示标签栏外边框，仅在 `type="line"` 时有效 | _boolean_ | `false` | | ellipsis | 是否省略过长的标题文字 | _boolean_ | `true` | diff --git a/src/tab/test/__snapshots__/demo.spec.js.snap b/src/tab/test/__snapshots__/demo.spec.js.snap index b63592ce1..1a4709130 100644 --- a/src/tab/test/__snapshots__/demo.spec.js.snap +++ b/src/tab/test/__snapshots__/demo.spec.js.snap @@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = ` -
+
@@ -36,7 +36,7 @@ exports[`renders demo correctly 1`] = ` -
+
@@ -62,7 +62,7 @@ exports[`renders demo correctly 1`] = ` -
+
@@ -100,7 +100,7 @@ exports[`renders demo correctly 1`] = ` -
+
@@ -144,7 +144,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -167,7 +167,7 @@ exports[`renders demo correctly 1`] = ` -
+
@@ -194,7 +194,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -215,7 +215,7 @@ exports[`renders demo correctly 1`] = ` -
+
@@ -252,7 +252,7 @@ exports[`renders demo correctly 1`] = ` -
+
@@ -285,7 +285,7 @@ exports[`renders demo correctly 1`] = ` -
+
@@ -326,7 +326,7 @@ exports[`renders demo correctly 1`] = ` -
+
diff --git a/src/tab/test/__snapshots__/index.spec.js.snap b/src/tab/test/__snapshots__/index.spec.js.snap index 7efa84ec6..93627890c 100644 --- a/src/tab/test/__snapshots__/index.spec.js.snap +++ b/src/tab/test/__snapshots__/index.spec.js.snap @@ -65,7 +65,7 @@ exports[`click to switch tab 1`] = ` -
+
@@ -87,7 +87,7 @@ exports[`click to switch tab 2`] = ` -
+
@@ -187,7 +187,7 @@ exports[`name prop 1`] = ` -
+
@@ -238,7 +238,7 @@ exports[`scrollspy prop 1`] = ` -
+
@@ -260,7 +260,7 @@ exports[`scrollspy prop 2`] = ` -
+
diff --git a/src/tab/test/__snapshots__/insert.spec.js.snap b/src/tab/test/__snapshots__/insert.spec.js.snap index ba009f874..15b4c1272 100644 --- a/src/tab/test/__snapshots__/insert.spec.js.snap +++ b/src/tab/test/__snapshots__/insert.spec.js.snap @@ -7,7 +7,7 @@ exports[`insert tab dynamically 1`] = ` -
+
diff --git a/src/tabs/index.js b/src/tabs/index.js index 00f3383f5..69a7c9b96 100644 --- a/src/tabs/index.js +++ b/src/tabs/index.js @@ -204,11 +204,10 @@ export default createComponent({ const title = titles[this.currentIndex].$el; const { lineWidth, lineHeight } = this; - const width = isDef(lineWidth) ? lineWidth : title.offsetWidth / 2; const left = title.offsetLeft + title.offsetWidth / 2; const lineStyle = { - width: addUnit(width), + width: addUnit(lineWidth), backgroundColor: this.color, transform: `translateX(${left}px) translateX(-50%)`, }; diff --git a/src/tabs/index.less b/src/tabs/index.less index aa4aca4b5..b4e1a54c0 100644 --- a/src/tabs/index.less +++ b/src/tabs/index.less @@ -119,6 +119,7 @@ bottom: 15px; left: 0; z-index: 1; + width: @tabs-bottom-bar-width; height: @tabs-bottom-bar-height; background-color: @tabs-bottom-bar-color; border-radius: @tabs-bottom-bar-height;