bee-checkbox

checkbox ui component for react

Usage no npm install needed!

<script type="module">
  import beeCheckbox from 'https://cdn.skypack.dev/bee-checkbox';
</script>

README

bee-checkbox

npm version Build Status Coverage Status

复选框

使用

使用单独的bee-checkbox包

组件引入

先进行下载bee-checkbox包

npm install --save bee-checkbox

组件调用

import Checkbox from 'bee-checkbox';

React.render(<div>
        <Checkbox colors="primary" />
</div>, document.getElementById('target'));

样式引入

  • 可以使用link引入dist目录下bee-checkbox.css
<link rel="stylesheet" href="./node_modules/build/bee-checkbox.css">
  • 可以在js中import样式
import "./node_modules/src/Checkbox.scss"
//或是
import "./node_modules/build/bee-checkbox.css"

API

Checkbox

参数 说明 类型 默认值
className 类名 string -
color one of: primary success info danger warning dark string ''
disabled 是否可用 bool false
onChange 监听改变 function -
defaultChecked 默认是否选中 bool false
checked 是否选中 bool -
indeterminate 部分选中 bool -
onDoubleClick 双击事件 function function(checked, event){}
onClick 单击事件 function function(event){}
value 选中的值,需配合CheckboxGroup使用 string -
inverse 设置选中为红色填充 bool false

CheckboxGroup

参数 说明 类型 默认值
className 类名 string -
onChange 监听改变 function -
value 设置默认值 array []
disabled 是否可用 bool false

已支持的键盘操作

按键 功能
space 选中/反选Checkbox

开发调试

$ git clone https://github.com/tinper-bee/bee-checkbox
$ cd bee-checkbox
$ npm install
$ npm run dev