From f1742ec97f169ba9fd16d1fa5075f148169b7d3d Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 7 Dec 2018 21:04:50 +0800 Subject: [PATCH] [improvement] Switch: update style (#2242) --- package.json | 3 +- .../test/__snapshots__/demo.spec.js.snap | 2 +- .../test/__snapshots__/index.spec.js.snap | 2 +- packages/style/var.less | 17 ++++++++ packages/switch-cell/en-US.md | 2 +- packages/switch-cell/index.less | 4 +- packages/switch-cell/index.vue | 2 +- .../test/__snapshots__/demo.spec.js.snap | 6 +-- packages/switch-cell/zh-CN.md | 2 +- packages/switch/demo/index.vue | 34 ++++++++++++---- packages/switch/en-US.md | 35 +++++++++++++---- packages/switch/index.less | 30 +++++++------- .../test/__snapshots__/demo.spec.js.snap | 16 +++++++- packages/switch/zh-CN.md | 39 +++++++++++++++---- yarn.lock | 6 +-- 15 files changed, 149 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index 9ce036f81..afb33fa60 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "build:site": "rimraf docs/dist && cross-env NODE_ENV=production webpack --config build/webpack.doc.js && gh-pages -d docs/dist", "test": "jest", "test:watch": "jest --watch", + "test:clear-cache": "jest --clearCache", "test:coverage": "open test/coverage/index.html", "release": "sh build/release.sh" }, @@ -111,7 +112,7 @@ "stylelint-config-standard": "^18.2.0", "uppercamelcase": "^3.0.0", "url-loader": "^1.1.2", - "vant-doc": "1.0.19", + "vant-doc": "1.0.20", "vue": "2.5.17", "vue-jest": "^3.0.1", "vue-loader": "^15.4.2", diff --git a/packages/address-edit/test/__snapshots__/demo.spec.js.snap b/packages/address-edit/test/__snapshots__/demo.spec.js.snap index e939de09e..74a2b3e53 100644 --- a/packages/address-edit/test/__snapshots__/demo.spec.js.snap +++ b/packages/address-edit/test/__snapshots__/demo.spec.js.snap @@ -97,7 +97,7 @@ exports[`renders demo correctly 1`] = `
-
+
diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap index 7b2a0ec70..f6f9b40a1 100644 --- a/packages/address-edit/test/__snapshots__/index.spec.js.snap +++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap @@ -207,7 +207,7 @@ exports[`create a AddressEdit with props 1`] = `
-
+
diff --git a/packages/style/var.less b/packages/style/var.less index 48786d8c3..fcc01e45a 100644 --- a/packages/style/var.less +++ b/packages/style/var.less @@ -75,6 +75,23 @@ // Swipe @swipe-indicator: 6px; +// Switch +@switch-width: 2em; +@switch-height: 1em; +@switch-node-size: 1em; +@switch-node-z-index: 1; +@switch-node-background-color: @white; +@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05); +@switch-background-color: @white; +@switch-on-background-color: @blue; +@switch-transition-duration: .3s; +@switch-disabled-opacity: .4; +@switch-border: 1px solid rgba(0, 0, 0, .1); + +// SwitchCell +@switch-cell-padding-top: 9px; +@switch-cell-padding-bottom: 9px; + // Tab @tabs-line-height: 44px; @tabs-card-height: 30px; diff --git a/packages/switch-cell/en-US.md b/packages/switch-cell/en-US.md index 14cd07954..86d5c380b 100644 --- a/packages/switch-cell/en-US.md +++ b/packages/switch-cell/en-US.md @@ -56,7 +56,7 @@ use `loading` property to keep component in loading state | title | the leftside title | `String` | `''` | | loading | whether switch is loading | `Boolean` | `false` | | disabled | whether to disable switch | `Boolean` | `false` | -| size | Size of switch | `String` | `26px` | +| size | Size of switch | `String` | `24px` | ### Event diff --git a/packages/switch-cell/index.less b/packages/switch-cell/index.less index 2df49b925..469230586 100644 --- a/packages/switch-cell/index.less +++ b/packages/switch-cell/index.less @@ -1,8 +1,8 @@ @import '../style/var'; .van-switch-cell { - padding-top: 8px; - padding-bottom: 8px; + padding-top: @switch-cell-padding-top; + padding-bottom: @switch-cell-padding-bottom; .van-switch { float: right; diff --git a/packages/switch-cell/index.vue b/packages/switch-cell/index.vue index c2408af78..2f7ffa937 100644 --- a/packages/switch-cell/index.vue +++ b/packages/switch-cell/index.vue @@ -31,7 +31,7 @@ export default create({ disabled: Boolean, size: { type: String, - default: '26px' + default: '24px' } }, diff --git a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap index c0c42dba4..18438c901 100644 --- a/packages/switch-cell/test/__snapshots__/demo.spec.js.snap +++ b/packages/switch-cell/test/__snapshots__/demo.spec.js.snap @@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
-
+
@@ -46,7 +46,7 @@ exports[`renders demo correctly 1`] = `
-
+
diff --git a/packages/switch-cell/zh-CN.md b/packages/switch-cell/zh-CN.md index fddb5b2ad..eeb313455 100644 --- a/packages/switch-cell/zh-CN.md +++ b/packages/switch-cell/zh-CN.md @@ -56,7 +56,7 @@ export default { | title | 左侧标题 | `String` | `''` | - | | loading | 是否为加载状态 | `Boolean` | `false` | - | | disabled | 是否为禁用状态 | `Boolean` | `false` | - | -| size | 开关尺寸 | `String` | `26px` | 1.1.11 | +| size | 开关尺寸 | `String` | `24px` | 1.1.11 | ### Event diff --git a/packages/switch/demo/index.vue b/packages/switch/demo/index.vue index 0c659a936..fb4aae127 100644 --- a/packages/switch/demo/index.vue +++ b/packages/switch/demo/index.vue @@ -18,12 +18,24 @@ /> - + + + + + + + + + @@ -35,18 +47,26 @@ export default { i18n: { 'zh-CN': { title: '提醒', - message: '是否切换开关？' + message: '是否切换开关？', + customSize: '自定义大小', + customColor: '自定义颜色', + asyncControl: '异步控制' }, 'en-US': { title: 'Confirm', - message: 'Are you sure to toggle switch?' + message: 'Are you sure to toggle switch?', + customSize: 'Custom Size', + customColor: 'Custom Color', + asyncControl: 'Async Control' } }, data() { return { checked: true, - checked2: true + checked2: true, + checked3: true, + checked4: true }; }, @@ -56,7 +76,7 @@ export default { title: this.$t('title'), message: this.$t('message') }).then(() => { - this.checked2 = checked; + this.checked4 = checked; }); } } diff --git a/packages/switch/en-US.md b/packages/switch/en-US.md index 07742bf9f..3b355b85d 100644 --- a/packages/switch/en-US.md +++ b/packages/switch/en-US.md @@ -28,24 +28,45 @@ export default { #### Disabled ```html - + ``` #### Loading - ```html - + ``` -#### Advanced usage +#### Custom Size + +```html + +``` + +#### Custom Color + +```html + +``` + +#### Async Control ```html ``` diff --git a/packages/switch/index.less b/packages/switch/index.less index 677124514..c6398f0de 100644 --- a/packages/switch/index.less +++ b/packages/switch/index.less @@ -1,27 +1,27 @@ @import '../style/var'; .van-switch { - height: 1em; - width: 1.8em; display: inline-block; position: relative; - border-radius: 1em; + width: @switch-width; + height: @switch-height; + border: @switch-border; + border-radius: @switch-node-size; box-sizing: content-box; - border: 1px solid rgba(0, 0, 0, .1); - background-color: @white; - transition: background-color .3s; + background-color: @switch-background-color; + transition: background-color @switch-transition-duration; &__node { top: 0; left: 0; - z-index: 1; - width: 1em; - height: 1em; - transition: .3s; position: absolute; border-radius: 100%; - background-color: @white; - box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05); + width: @switch-node-size; + height: @switch-node-size; + z-index: @switch-node-z-index; + transition: @switch-transition-duration; + box-shadow: @switch-node-box-shadow; + background-color: @switch-node-background-color; } &__loading { @@ -32,14 +32,14 @@ } &--on { - background-color: @blue; + background-color: @switch-on-background-color; .van-switch__node { - transform: translateX(.8em); + transform: translateX(@switch-width - @switch-node-size); } } &--disabled { - opacity: .4; + opacity: @switch-disabled-opacity; } } diff --git a/packages/switch/test/__snapshots__/demo.spec.js.snap b/packages/switch/test/__snapshots__/demo.spec.js.snap index 44196c044..4aa45321e 100644 --- a/packages/switch/test/__snapshots__/demo.spec.js.snap +++ b/packages/switch/test/__snapshots__/demo.spec.js.snap @@ -24,7 +24,21 @@ exports[`renders demo correctly 1`] = `
-
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
diff --git a/packages/switch/zh-CN.md b/packages/switch/zh-CN.md index 800258c0c..e976ddbe3 100644 --- a/packages/switch/zh-CN.md +++ b/packages/switch/zh-CN.md @@ -10,6 +10,7 @@ Vue.use(Switch); ### 代码演示 #### 基础用法 + ```html ``` @@ -25,22 +26,47 @@ export default { ``` #### 禁用状态 + ```html - + ``` #### 加载状态 + ```html - + ``` -#### 高级用法 +#### 自定义大小 + +```html + +``` + +#### 自定义颜色 + +```html + +``` + +#### 异步控制 + ```html ``` @@ -66,7 +92,6 @@ export default { }; ``` - ### API | 参数 | 说明 | 类型 | 默认值 | 版本 | diff --git a/yarn.lock b/yarn.lock index 6ed868344..0e0d2c954 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9598,9 +9598,9 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" -vant-doc@1.0.19: - version "1.0.19" - resolved "https://registry.yarnpkg.com/vant-doc/-/vant-doc-1.0.19.tgz#9e6ebef52c53fac698472099154df074400d3b56" +vant-doc@1.0.20: + version "1.0.20" + resolved "https://registry.yarnpkg.com/vant-doc/-/vant-doc-1.0.20.tgz#a497c7140c167f8d4013c0833dbccf3bd099f8e0" dependencies: cheerio "0.22.0" commander "^2.17.1"