| 1 | # bee-checkbox
|
| 2 | [](https://www.npmjs.com/package/bee-checkbox)
|
| 3 | [](https://travis-ci.org/tinper-bee/bee-checkbox)
|
| 4 | [](https://coveralls.io/github/tinper-bee/bee-checkbox?branch=master)
|
| 5 |
|
| 6 | 复选框
|
| 7 |
|
| 8 | ## 使用
|
| 9 | 使用单独的bee-checkbox包
|
| 10 | #### 组件引入
|
| 11 | 先进行下载bee-checkbox包
|
| 12 |
|
| 13 | ```
|
| 14 | npm install --save bee-checkbox
|
| 15 | ```
|
| 16 | 组件调用
|
| 17 | ```js
|
| 18 | import Checkbox from 'bee-checkbox';
|
| 19 |
|
| 20 | React.render(<div>
|
| 21 | <Checkbox colors="primary" />
|
| 22 | </div>, document.getElementById('target'));
|
| 23 |
|
| 24 | ```
|
| 25 | #### 样式引入
|
| 26 | - 可以使用link引入dist目录下bee-checkbox.css
|
| 27 | ```
|
| 28 | <link rel="stylesheet" href="./node_modules/build/bee-checkbox.css">
|
| 29 | ```
|
| 30 | - 可以在js中import样式
|
| 31 | ```js
|
| 32 | import "./node_modules/src/Checkbox.scss"
|
| 33 | //或是
|
| 34 | import "./node_modules/build/bee-checkbox.css"
|
| 35 | ```
|
| 36 |
|
| 37 |
|
| 38 | ## API
|
| 39 |
|
| 40 | ## Checkbox
|
| 41 |
|
| 42 | |参数|说明|类型|默认值|
|
| 43 | |:--|:---|:--|:---|
|
| 44 | |className|类名|string|-|
|
| 45 | |color|one of: `primary` `success` `info` `danger` `warning` `dark`|string|''|
|
| 46 | |disabled|是否可用|bool|false|
|
| 47 | |onChange|监听改变|function|-|
|
| 48 | |defaultChecked|默认是否选中|bool|false|
|
| 49 | |checked|是否选中|bool|-|
|
| 50 | |indeterminate|部分选中|bool|-|
|
| 51 | |onDoubleClick|双击事件|function|function(checked, event){}|
|
| 52 | |onClick|单击事件|function|function(event){}|
|
| 53 | |value|选中的值，需配合CheckboxGroup使用|string|-|
|
| 54 | |inverse|设置选中为红色填充|bool|false|
|
| 55 |
|
| 56 |
|
| 57 | ## CheckboxGroup
|
| 58 |
|
| 59 | |参数|说明|类型|默认值|
|
| 60 | |:--|:---|:--|:---|
|
| 61 | |className|类名|string|-|
|
| 62 | |onChange|监听改变|function|-|
|
| 63 | |value|设置默认值|array|[]|
|
| 64 | |disabled|是否可用|bool|false|
|
| 65 |
|
| 66 | ## 已支持的键盘操作
|
| 67 |
|
| 68 | |按键|功能|
|
| 69 | |:---|:----|
|
| 70 | |space |选中/反选Checkbox|
|
| 71 |
|
| 72 | #### 开发调试
|
| 73 |
|
| 74 | ```sh
|
| 75 | $ git clone https://github.com/tinper-bee/bee-checkbox
|
| 76 | $ cd bee-checkbox
|
| 77 | $ npm install
|
| 78 | $ npm run dev
|
| 79 | ```
|