[improvement] Switch: update style (#1065)

example/pages/switch/index.wxml

@@ -21,12 +21,27 @@
   />
 </demo-block>
 
-<demo-block title="高级用法" padding>
+<demo-block title="自定义大小" padding>
+  <van-switch
+    checked="{{ checked }}"
+    size="24px"
+    bind:change="onChange"
+  />
+</demo-block>
+
+<demo-block title="自定义颜色" padding>
+  <van-switch
+    checked="{{ checked }}"
+    active-color="#4b0"
+    inactive-color="#f44"
+    bind:change="onChange"
+  />
+</demo-block>
+
+<demo-block title="异步控制" padding>
   <van-switch
     checked="{{ checked2 }}"
     size="36px"
-    active-color="#4b0"
-    inactive-color="#f44"
     bind:change="onChange2"
   />
 </demo-block>

packages/common/style/var.less

@@ -42,6 +42,23 @@
 @notify-font-size: 14px;
 @notify-line-height: 20px;
 
+// 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;
+
 // Toast
 @toast-max-width: 70%;
 @toast-font-size: 14px;

packages/switch-cell/README.md

@@ -66,7 +66,7 @@ Page({
 | title | 左侧标题 |  `String` | `''` |
 | loading | 是否为加载状态 |  `Boolean` | `false` |
 | disabled | 是否为禁用状态 |  `Boolean` | `false` |
-| size | 开关尺寸 | `String` | `26px` |
+| size | 开关尺寸 | `String` | `24px` |
 | active-color | 开关打开时的背景色 | `String` | `#1989fa` |
 | inactive-color | 开关关闭时的背景色 | `String` | `#fff` |
 

packages/switch-cell/index.less

@@ -1,8 +1,8 @@
 @import '../common/style/var.less';
 
 .van-switch-cell {
-  padding-top: 8px;
-  padding-bottom: 8px;
+  padding-top: @switch-cell-padding-top;
+  padding-bottom: @switch-cell-padding-bottom;
 
   &__switch {
     vertical-align: middle;

packages/switch-cell/index.ts

@@ -13,7 +13,7 @@ VantComponent({
     inactiveColor: String,
     size: {
       type: String,
-      value: '26px'
+      value: '24px'
     }
   },
 

packages/switch/README.md

@@ -42,14 +42,27 @@ Page({
 <van-switch checked="{{ checked }}" loading />
 ```
 
-#### 高级用法
+#### 自定义大小
+
+```html
+<van-switch checked="{{ checked }}" size="24px" />
+```
+
+#### 自定义颜色
 
 ```html
 <van-switch
-  size="36px"
   checked="{{ checked }}"
   active-color="#4b0"
   inactive-color="#f44"
+/>
+```
+
+#### 异步控制
+
+```html
+<van-switch
+  checked="{{ checked }}"
   bind:change="onChange"
 />
 ```

packages/switch/index.less

@@ -1,27 +1,27 @@
 @import '../common/style/var.less';
 
 .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 {
@@ -31,14 +31,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;
   }
 }