docs(Switch): add with cell demo (#5575)

src/switch/README.md

@@ -78,6 +78,14 @@ export default {
 };  
 ```
 
+### Inside a Cell
+
+```html
+<van-cell center title="Title">
+  <van-switch v-model="checked" slot="right-icon" size="24" />
+</van-cell>
+```
+
 ## API
 
 ### Props

src/switch/README.zh-CN.md

@@ -90,6 +90,14 @@ export default {
 }; 
 ```
 
+### 搭配单元格使用
+
+```html
+<van-cell center title="标题">
+  <van-switch v-model="checked" slot="right-icon" size="24" />
+</van-cell>
+```
+
 ## API
 
 ### Props

src/switch/demo/index.vue

@@ -17,12 +17,22 @@
     </demo-block>
 
     <demo-block :title="$t('customColor')">
-      <van-switch v-model="checked3" active-color="#07c160" inactive-color="#ee0a24" />
+      <van-switch
+        v-model="checked3"
+        active-color="#07c160"
+        inactive-color="#ee0a24"
+      />
     </demo-block>
 
     <demo-block :title="$t('asyncControl')">
       <van-switch :value="checked4" @input="onInput" />
     </demo-block>
+
+    <demo-block :title="$t('withCell')">
+      <van-cell center :title="$t('title')">
+        <van-switch v-model="checked5" slot="right-icon" size="24" />
+      </van-cell>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -30,15 +40,19 @@
 export default {
   i18n: {
     'zh-CN': {
-      title: '提醒',
+      title: '标题',
+      confirm: '提醒',
       message: '是否切换开关？',
+      withCell: '搭配单元格使用',
       customSize: '自定义大小',
       customColor: '自定义颜色',
       asyncControl: '异步控制'
     },
     'en-US': {
-      title: 'Confirm',
+      title: 'Title',
+      confirm: 'Confirm',
       message: 'Are you sure to toggle switch?',
+      withCell: 'Inside a Cell',
       customSize: 'Custom Size',
       customColor: 'Custom Color',
       asyncControl: 'Async Control'
@@ -50,7 +64,9 @@ export default {
       checked: true,
       checked2: true,
       checked3: true,
-      checked4: true
+      checked4: true,
+      checked5: true,
+      checked6: false
     };
   },
 
@@ -73,10 +89,8 @@ export default {
 @import '../../style/var';
 
 .demo-switch {
-  background: @white;
-
   .van-switch {
-    margin: 0 @padding-md;
+    margin-left: @padding-md;
   }
 }
 </style>

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

@@ -34,5 +34,13 @@ exports[`renders demo correctly 1`] = `
       <div class="van-switch__node"></div>
     </div>
   </div>
+  <div>
+    <div class="van-cell van-cell--center">
+      <div class="van-cell__title"><span>标题</span></div>
+      <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
+        <div class="van-switch__node"></div>
+      </div>
+    </div>
+  </div>
 </div>
 `;