提交 69f9757f 编写于 作者: A AmyFoxFN

<update>(doc): checkbox shape

上级 2aea9be1
......@@ -37,9 +37,9 @@
The value of `checkList` is an array, which represents the set of the values of `value` in selected checkboxs.
- Horizontal order
- Horizontal order and icon shape
You can set `horizontal` to change the style to horizontal order.
You can set `horizontal` to change the style to horizontal order. Besides, you could use `shape` to configure the shape of icon
```html
<cube-checkbox-group v-model="checkList" :options="options" :horizontal="true" />
......@@ -62,8 +62,9 @@
| Attribute | Description | Type | Accepted Values | Default |
| - | - | - | - | - |
| horizontal | whether in horizontal order | Boolean | true/false | false |
| options | array of checkbox options | Array | - | - |
| horizontal | whether in horizontal order | Boolean | true/false | false |
| shape | icon shape | String | circle/square | circle |
* `options` sub configuration
......
......@@ -14,15 +14,15 @@
If selected, the value of `checked` is `true`.
- Position of the checkbox icon
- Position and shape of the checkbox icon
```html
<cube-checkbox v-model="checked" position="right">
<cube-checkbox v-model="checked" position="right" shape="square">
Position Checkbox
</cube-checkbox>
```
If setting `position` to `'right'`, the position of the checkbox's icon is on the right.
If setting `position` to `'right'`, the position of the checkbox's icon is on the right. And you could use `shape` to configure the shape of icon
- Change the value of model
......@@ -60,6 +60,7 @@
| - | - | - | - | - |
| option | option value | Boolean/String/Object | - | - |
| position | icon position | String | left/right | left |
| shape | icon shape | String | circle/square | circle |
* `option` sub configuration
......
......@@ -35,9 +35,9 @@
```
`checkList` 的值是一个数组,代表的是选中的复选框 `value` 的值的集合。
- 水平排列
- 水平排列、图标形状
可通过设置 `horizontal` 改变样式为水平排列
可通过设置 `horizontal` 改变样式为水平排列,另外,还可以通过 `shape` 配置图标形状。
```html
<cube-checkbox-group v-model="checkList" :options="options" :horizontal="true" />
......@@ -60,8 +60,9 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| - | - | - | - | - |
| horizontal | 是否水平排列 | Boolean | true/false | false |
| options | 选项数组 | Array | - | - |
| horizontal | 是否水平排列 | Boolean | true/false | false |
| shape | 图标形状 | String | circle/square | circle |
* `options` 子配置项
......
......@@ -13,14 +13,14 @@
```
如果选中了,则 `checked` 的值就为 `true`
- 复选框图标位置
- 复选框图标位置、形状
```html
<cube-checkbox v-model="checked" position="right">
<cube-checkbox v-model="checked" position="right" shape="square">
Position Checkbox
</cube-checkbox>
```
设置 `position``'right'` 则复选框图标位置在右边。
设置 `position``'right'` 则复选框图标位置在右边,且可以通过 `shape` 配置图标形状
- 改变 model 的值
......@@ -58,6 +58,7 @@
| - | - | - | - | - |
| option | 配置项 | Boolean/String/Object | - | - |
| position | 位置 | String | left/right | left |
| shape | 图标形状 | String | circle/square | circle |
* `option` 子配置项
......
......@@ -3,9 +3,9 @@
<template slot="content">
<cube-checkbox v-model="checked">Checkbox</cube-checkbox>
<p>checked value: {{checked}}</p>
<cube-checkbox v-model="checked" position="right">Position Checkbox</cube-checkbox>
<cube-checkbox v-model="checked" position="right" shape="square">Position Checkbox</cube-checkbox>
<br><br>
<cube-checkbox v-model="checked2" :option="optionValue" shape="square"></cube-checkbox>
<cube-checkbox v-model="checked2" :option="optionValue"></cube-checkbox>
<p>checked value (with option) : {{checked2}}</p>
<cube-checkbox v-model="checked2" :option="{disabled: true}">
Disabled Checkbox
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册