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

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>