docs(Checkbox): add custom shape demo (#4642)

src/checkbox/README.md

@@ -33,6 +33,12 @@ export default {
 <van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
 ```
 
+### Custom Shape
+
+```html
+<van-checkbox v-model="checked" shape="square">Checkbox</van-checkbox>
+```
+
 ### Custom Color
 
 ```html

src/checkbox/README.zh-CN.md

@@ -13,7 +13,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
 
 ### 基础用法
 
-通过`v-model`绑定 checkbox 的勾选状态
+通过`v-model`绑定复选框的勾选状态
 
 ```html
 <van-checkbox v-model="checked">复选框</van-checkbox>
@@ -37,6 +37,14 @@ export default {
 <van-checkbox v-model="checked" disabled>复选框</van-checkbox>
 ```
 
+### 自定义形状
+
+将`shape`属性设置为`square`，复选框的形状会变成方形
+
+```html
+<van-checkbox v-model="checked" shape="square">复选框</van-checkbox>
+```
+
 ### 自定义颜色
 
 通过`checked-color`属性可以自定义选中状态下的图标颜色

src/checkbox/demo/index.vue

@@ -13,6 +13,12 @@
       </van-checkbox>
     </demo-block>
 
+    <demo-block :title="$t('customShape')">
+      <van-checkbox v-model="checkboxShape" shape="square">
+        {{ $t('customColor') }}
+      </van-checkbox>
+    </demo-block>
+
     <demo-block :title="$t('customColor')">
       <van-checkbox v-model="checkbox2" checked-color="#07c160">
         {{ $t('customColor') }}
@@ -84,6 +90,7 @@ export default {
       checkbox: '复选框',
       customIcon: '自定义图标',
       customColor: '自定义颜色',
+      customShape: '自定义形状',
       title3: '复选框组',
       title4: '设置最大可选数',
       title5: '搭配单元格组件使用',
@@ -95,6 +102,7 @@ export default {
       checkbox: 'Checkbox',
       customIcon: 'Custom Icon',
       customColor: 'Custom Color',
+      customShape: 'Custom Shape',
       title3: 'Checkbox Group',
       title4: 'Maximum amount of checked options',
       title5: 'Inside a Cell',
@@ -109,6 +117,7 @@ export default {
       checkbox1: true,
       checkbox2: true,
       checkbox3: true,
+      checkboxShape: true,
       list: [
         'a',
         'b',

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

@@ -22,6 +22,14 @@ exports[`renders demo correctly 1`] = `
     </span>
     </div>
   </div>
+  <div>
+    <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
+      <div class="van-checkbox__icon van-checkbox__icon--square van-checkbox__icon--checked"><i class="van-icon van-icon-success">
+          <!----></i></div><span class="van-checkbox__label">
+      自定义颜色
+    </span>
+    </div>
+  </div>
   <div>
     <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">

src/radio/README.md

@@ -62,7 +62,7 @@ Use icon slot to custom icon
     <img
       slot="icon"
       slot-scope="props"
-      :src="props.checked ? icon.active : icon.inactive"
+      :src="props.checked ? activeIcon : inactiveIcon"
     >
   </van-radio>
   <van-radio name="2">
@@ -70,7 +70,7 @@ Use icon slot to custom icon
     <img
       slot="icon"
       slot-scope="props"
-      :src="props.checked ? icon.active : icon.inactive"
+      :src="props.checked ? activeIcon : inactiveIcon"
     >
   </van-radio>
 </van-radio-group>
@@ -81,10 +81,8 @@ export default {
   data() {
     return {
       radio: '1',
-      icon: {
+      activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
-        active: 'https://img.yzcdn.cn/vant/user-active.png',
+      inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
-        inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
-      }
     };
   }
 };

src/radio/README.zh-CN.md

@@ -35,7 +35,7 @@ export default {
 
 ### 禁用状态
 
-通过`disabled`属性禁止选项切换，在`van-radio`上设置`disabled`可以禁用单个选项
+通过`disabled`属性禁止选项切换，在`Radio`上设置`disabled`可以禁用单个选项
 
 ```html
 <van-radio-group v-model="radio" disabled>
@@ -66,7 +66,7 @@ export default {
     <img
       slot="icon"
       slot-scope="props"
-      :src="props.checked ? icon.active : icon.inactive"
+      :src="props.checked ? activeIcon : inactiveIcon"
     >
   </van-radio>
   <van-radio name="2">
@@ -74,7 +74,7 @@ export default {
     <img
       slot="icon"
       slot-scope="props"
-      :src="props.checked ? icon.active : icon.inactive"
+      :src="props.checked ? activeIcon : inactiveIcon"
     >
   </van-radio>
 </van-radio-group>
@@ -83,18 +83,16 @@ export default {
 ```js
 export default {
   data() {
-    radio: '1'
+    radio: '1',
-    icon: {
+    activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
-      active: 'https://img.yzcdn.cn/vant/user-active.png',
+    inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
-      inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
-    }
   }
 }
 ```
 
 ### 与 Cell 组件一起使用
 
-此时你需要再引入`Cell`和`CellGroup`组件。
+此时你需要再引入`Cell`和`CellGroup`组件
 
 ```html
 <van-radio-group v-model="radio">

src/radio/demo/index.vue

@@ -1,51 +1,28 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-radio-group
+      <van-radio-group v-model="radio1" class="demo-radio-group">
-        v-model="radio1"
-        class="demo-radio-group"
-      >
         <van-radio name="1">{{ $t('radio') }} 1</van-radio>
         <van-radio name="2">{{ $t('radio') }} 2</van-radio>
       </van-radio-group>
     </demo-block>
 
     <demo-block :title="$t('disabled')">
-      <van-radio-group
+      <van-radio-group v-model="radio2" class="demo-radio-group" disabled>
-        v-model="radio2"
-        class="demo-radio-group"
-        disabled
-      >
         <van-radio name="1">{{ $t('radio') }} 1</van-radio>
         <van-radio name="2">{{ $t('radio') }} 2</van-radio>
       </van-radio-group>
     </demo-block>
 
     <demo-block :title="$t('customColor')">
-      <van-radio-group
+      <van-radio-group v-model="radio3" class="demo-radio-group">
-        v-model="radio3"
+        <van-radio name="1" checked-color="#07c160">{{ $t('radio') }} 1</van-radio>
-        class="demo-radio-group"
+        <van-radio name="2" checked-color="#07c160">{{ $t('radio') }} 2</van-radio>
-      >
-        <van-radio
-          name="1"
-          checked-color="#07c160"
-        >
-          {{ $t('radio') }} 1
-        </van-radio>
-        <van-radio
-          name="2"
-          checked-color="#07c160"
-        >
-          {{ $t('radio') }} 2
-        </van-radio>
       </van-radio-group>
     </demo-block>
 
     <demo-block :title="$t('customIcon')">
-      <van-radio-group
+      <van-radio-group v-model="radio4" class="demo-radio-group">
-        v-model="radio4"
-        class="demo-radio-group"
-      >
         <van-radio name="1">
           {{ $t('radio') }} 1
           <template #icon="{ checked }">
@@ -64,25 +41,11 @@
     <demo-block :title="$t('withCell')">
       <van-radio-group v-model="radio5">
         <van-cell-group>
-          <van-cell
+          <van-cell clickable :title="$t('radio') + 1" @click="radio5 = '1'">
-            clickable
+            <van-radio name="1" slot="right-icon" />
-            :title="$t('radio') + 1"
-            @click="radio5 = '1'"
-          >
-            <van-radio
-              name="1"
-              slot="right-icon"
-            />
           </van-cell>
-          <van-cell
+          <van-cell clickable :title="$t('radio') + 2" @click="radio5 = '2'">
-            clickable
+            <van-radio name="2" slot="right-icon" />
-            :title="$t('radio') + 2"
-            @click="radio5 = '2'"
-          >
-            <van-radio
-              name="2"
-              slot="right-icon"
-            />
           </van-cell>
         </van-cell-group>
       </van-radio-group>

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

@@ -30,15 +30,11 @@ exports[`renders demo correctly 1`] = `
     <div role="radiogroup" class="demo-radio-group van-radio-group">
       <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
         <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
-            <!----></i></div><span class="van-radio__label">
+            <!----></i></div><span class="van-radio__label">单选框 1</span>
-        单选框 1
-      </span>
       </div>
       <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
         <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">
+            <!----></i></div><span class="van-radio__label">单选框 2</span>
-        单选框 2
-      </span>
       </div>
     </div>
   </div>