diff --git a/example/pages/checkbox/index.js b/example/pages/checkbox/index.js
index 9491352e..1e36cfaf 100644
--- a/example/pages/checkbox/index.js
+++ b/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: {
- normal:
- 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
- active:
- 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
- }
+ activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
+ inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
},
onChange(event) {
diff --git a/example/pages/checkbox/index.wxml b/example/pages/checkbox/index.wxml
index f246eb56..841b1981 100644
--- a/example/pages/checkbox/index.wxml
+++ b/example/pages/checkbox/index.wxml
@@ -26,6 +26,18 @@
+
+
+ 复选框
+
+
+
自定义图标
-
+
@@ -83,7 +100,7 @@
复选框
@@ -36,24 +36,30 @@ Page({
### 禁用状态
+通过设置`disabled`属性可以禁用复选框
+
```html
-
+
+ 复选框
+
+```
+
+### 自定义形状
+
+将`shape`属性设置为`square`,复选框的形状会变成方形
+
+ ```html
+
复选框
```
### 自定义颜色
+通过`checked-color`属性可以自定义选中状态下的图标颜色
+
```html
-
+
复选框
```
@@ -65,10 +71,7 @@ Page({
```html
自定义图标
-
+
```
@@ -76,10 +79,8 @@ Page({
Page({
data: {
checked: true,
- icon: {
- normal: '//img.yzcdn.cn/icon-normal.png',
- active: '//img.yzcdn.cn/icon-active.png'
- }
+ activeIcon: '//img.yzcdn.cn/icon-active.png',
+ inactiveIcon: '//img.yzcdn.cn/icon-normal.png'
},
onChange(event) {
@@ -96,20 +97,15 @@ Page({
```html
-
- 复选框 {{ item }}
-
+ 复选框 a
+ 复选框 b
+ 复选框 c
```
```javascript
Page({
data: {
- list: ['a', 'b', 'c'],
result: ['a', 'b']
},
@@ -125,13 +121,9 @@ Page({
```html
-
- 复选框 {{ item }}
-
+ 复选框 a
+ 复选框 b
+ 复选框 c
```