docs(Checkbox): add direction usage document (#5748)

This commit is contained in:
chenjiahan 2020-03-04 09:41:30 +08:00
parent 6d19ad590b
commit b8ce2ac6d6
2 changed files with 40 additions and 2 deletions

View File

@ -93,7 +93,6 @@ When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an
<van-checkbox-group v-model="result">
<van-checkbox name="a">Checkbox a</van-checkbox>
<van-checkbox name="b">Checkbox b</van-checkbox>
<van-checkbox name="c">Checkbox c</van-checkbox>
</van-checkbox-group>
```
@ -107,6 +106,25 @@ export default {
};
```
### Horizontal
```html
<van-checkbox-group v-model="result" direction="horizontal">
<van-checkbox name="a">Checkbox a</van-checkbox>
<van-checkbox name="b">Checkbox b</van-checkbox>
</van-checkbox-group>
```
```js
export default {
data() {
return {
result: []
};
}
};
```
### Maximum amount of checked options
```html

View File

@ -103,7 +103,6 @@ export default {
<van-checkbox-group v-model="result">
<van-checkbox name="a">复选框 a</van-checkbox>
<van-checkbox name="b">复选框 b</van-checkbox>
<van-checkbox name="c">复选框 c</van-checkbox>
</van-checkbox-group>
```
@ -117,6 +116,27 @@ export default {
};
```
### 水平排列
`direction`属性设置为`horizontal`后,复选框组会变成水平排列
```html
<van-checkbox-group v-model="result" direction="horizontal">
<van-checkbox name="a">复选框 a</van-checkbox>
<van-checkbox name="b">复选框 b</van-checkbox>
</van-checkbox-group>
```
```js
export default {
data() {
return {
result: []
};
}
};
```
### 限制最大可选数
通过`max`属性可以限制复选框组的最大可选数