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

example/pages/checkbox/index.js

@@ -5,16 +5,13 @@ Page({
     checkbox1: true,
     checkbox2: true,
     checkbox3: true,
+    checkboxShape: true,
     list: ['a', 'b', 'c'],
     result: ['a', 'b'],
     result2: [],
     result3: [],
-    icon: {
+    activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
-      normal:
+    inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
-        'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
-      active:
-        'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
-    }
   },
 
   onChange(event) {

example/pages/checkbox/index.wxml

@@ -26,6 +26,18 @@
   </van-checkbox>
 </demo-block>
 
+<demo-block title="自定义形状">
+  <van-checkbox
+    value="{{ checkboxShape }}"
+    data-key="checkboxShape"
+    shape="square"
+    custom-class="demo-checkbox"
+    bind:change="onChange"
+  >
+    复选框
+  </van-checkbox>
+</demo-block>
+
 <demo-block title="自定义颜色">
   <van-checkbox
     value="{{ checkbox2 }}"
@@ -47,7 +59,12 @@
     bind:change="onChange"
   >
     自定义图标
-    <image mode="widthFix" slot="icon" src="{{ checkbox3 ? icon.active : icon.normal }}" class="icon" />
+    <image
+      slot="icon"
+      class="icon"
+      mode="widthFix"
+      src="{{ checkbox3 ? activeIcon : inactiveIcon }}"
+    />
   </van-checkbox>
 </demo-block>
 
@@ -83,7 +100,7 @@
       <van-cell
         wx:for="{{ list }}"
         wx:key="*this"
-        title="复选框{{ item }}"
+        title="复选框 {{ item }}"
         value-class="value-class"
         clickable
         data-index="{{ index }}"

packages/checkbox/README.md

@@ -14,7 +14,7 @@
 
 ### 基础用法
 
-通过`value`绑定 checkbox 的勾选状态
+通过`value`绑定复选框的勾选状态
 
 ```html
 <van-checkbox value="{{ checked }}" bind:change="onChange">复选框</van-checkbox>
@@ -36,24 +36,30 @@ Page({
 
 ### 禁用状态
 
+通过设置`disabled`属性可以禁用复选框
+
 ```html
-<van-checkbox
+<van-checkbox disabled value="{{ checked }}" bind:change="onChange">
-  disabled
+  复选框
-  value="{{ checked }}"
+</van-checkbox>
-  bind:change="onChange"
+```
->
+
+### 自定义形状
+
+将`shape`属性设置为`square`，复选框的形状会变成方形
+
+ ```html
+<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">
   复选框
 </van-checkbox>
 ```
 
 ### 自定义颜色
 
+通过`checked-color`属性可以自定义选中状态下的图标颜色
+
  ```html
-<van-checkbox
+<van-checkbox value="{{ checked }}" checked-color="#07c160" bind:change="onChange">
-  value="{{ checked }}"
-  checked-color="#07c160"
-  bind:change="onChange"
->
   复选框
 </van-checkbox>
 ```
@@ -65,10 +71,7 @@ Page({
 ```html
 <van-checkbox use-icon-slot value="{{ checked }}" bind:change="onChange">
   自定义图标
-  <image
+  <image slot="icon" src="{{ checked ? activeIcon : inactiveIcon }}" />
-    slot="icon"
-    src="{{ checked ? icon.active : icon.normal }}"
-  />
 </van-checkbox>
 ```
 
@@ -76,10 +79,8 @@ Page({
 Page({
   data: {
     checked: true,
-    icon: {
+    activeIcon: '//img.yzcdn.cn/icon-active.png',
-      normal: '//img.yzcdn.cn/icon-normal.png',
+    inactiveIcon: '//img.yzcdn.cn/icon-normal.png'
-      active: '//img.yzcdn.cn/icon-active.png'
-    }
   },
 
   onChange(event) {
@@ -96,20 +97,15 @@ Page({
 
 ```html
 <van-checkbox-group value="{{ result }}" bind:change="onChange">
-  <van-checkbox
+  <van-checkbox name="a">复选框 a</van-checkbox>
-    wx:for="{{ list }}"
+  <van-checkbox name="b">复选框 b</van-checkbox>
-    wx:key="index"
+  <van-checkbox name="c">复选框 c</van-checkbox>
-    name="{{ item }}"
-  >
-    复选框 {{ item }}
-  </van-checkbox>
 </van-checkbox-group>
 ```
 
 ```javascript
 Page({
   data: {
-    list: ['a', 'b', 'c'],
     result: ['a', 'b']
   },
 
@@ -125,13 +121,9 @@ Page({
 
 ```html
 <van-checkbox-group value="{{ result }}" bind:change="onChange" max="{{ 2 }}">
-  <van-checkbox
+  <van-checkbox name="a">复选框 a</van-checkbox>
-    wx:for="{{ list }}"
+  <van-checkbox name="b">复选框 b</van-checkbox>
-    wx:key="index"
+  <van-checkbox name="c">复选框 c</van-checkbox>
-    name="{{ item }}"
-  >
-    复选框 {{ item }}
-  </van-checkbox>
 </van-checkbox-group>
 ```