[improvement] Switch: update style (#2242)

packages/switch/demo/index.vue

@@ -18,12 +18,24 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('advancedUsage')">
+    <demo-block :title="$t('customSize')">
       <van-switch
-        :value="checked2"
-        size="36px"
+        v-model="checked2"
+        size="24px"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('customColor')">
+      <van-switch
+        v-model="checked3"
         active-color="#4b0"
         inactive-color="#f44"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('asyncControl')">
+      <van-switch
+        :value="checked4"
         @input="onInput"
       />
     </demo-block>
@@ -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;
       });
     }
   }

packages/switch/en-US.md

@@ -28,24 +28,45 @@ export default {
 #### Disabled
 
 ```html
-<van-switch v-model="checked" disabled />
+<van-switch
+  v-model="checked"
+  disabled
+/>
 ```
 
 #### Loading
 
-
 ```html
-<van-switch v-model="checked" loading />
+<van-switch
+  v-model="checked"
+  loading
+/>
 ```
 
-#### Advanced usage
+#### Custom Size
+
+```html
+<van-switch
+  v-model="checked"
+  size="24px"
+/>
+```
+
+#### Custom Color
+
+```html
+<van-switch
+  v-model="checked"
+  active-color="#4b0"
+  inactive-color="#f44"
+/>
+```
+
+#### Async Control
 
 ```html
 <van-switch
   :value="checked"
-  size="36px"
-  active-color="#4b0"
-  inactive-color="#f44"
   @input="onInput"
 />
 ```

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;
   }
 }

packages/switch/test/__snapshots__/demo.spec.js.snap

@@ -24,7 +24,21 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-switch van-switch--on" style="font-size:36px;background-color:#4b0;">
+    <div class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
+      <div class="van-switch__node">
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-switch van-switch--on" style="font-size:30px;background-color:#4b0;">
+      <div class="van-switch__node">
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-switch van-switch--on" style="font-size:30px;background-color:undefined;">
       <div class="van-switch__node">
         <!---->
       </div>

packages/switch/zh-CN.md

@@ -10,6 +10,7 @@ Vue.use(Switch);
 ### 代码演示
 
 #### 基础用法
+
 ```html
 <van-switch v-model="checked" />
 ```
@@ -25,22 +26,47 @@ export default {
 ```
 
 #### 禁用状态
+
 ```html
-<van-switch v-model="checked" disabled />
+<van-switch
+  v-model="checked"
+  disabled
+/>
 ```
 
 #### 加载状态
+
 ```html
-<van-switch v-model="checked" loading />
+<van-switch
+  v-model="checked"
+  loading
+/>
 ```
 
-#### 高级用法
+#### 自定义大小
+
+```html
+<van-switch
+  v-model="checked"
+  size="24px"
+/>
+```
+
+#### 自定义颜色
+
+```html
+<van-switch
+  v-model="checked"
+  active-color="#4b0"
+  inactive-color="#f44"
+/>
+```
+
+#### 异步控制
+
 ```html
 <van-switch
   :value="checked"
-  size="36px"
-  active-color="#4b0"
-  inactive-color="#f44"
   @input="onInput"
 />
 ```
@@ -66,7 +92,6 @@ export default {
 }; 
 ```
 
-
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |