bee-switch
两种状态切换的开关
使用
使用单独的switch包
组件引入
先进行下载switch包
npm install --save bee-switch
组件调用
import { Switch } from 'bee-switch';
React.render(<div>
<Switch />
</div>, document.getElementById('target'));
样式引入
- 可以使用link引入dist目录下switch.css
<link rel="stylesheet" href="./node_modules/build/bee-switch.css">
- 可以在js中import样式
import "./node_modules/src/Switch.scss"
//或是
import "./node_modules/build/bee-switch.css"
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
checked | 指定当前是否选中 | Boolean | false |
defaultChecked | 初始是否选中 | Boolean | false |
onChange | 变化时回调函数,自定义参照demo | Function(checked:Boolean) | |
disabled | 设置是否禁用 | Boolean | false |
checkedChildren | 选中时的内容 | React | Node |
unCheckedChildren | 非选中时的内容 | React | Node |
size | 大小设置,oneOf:sm , lg
|
string | '' |
colors | 颜色设置,oneOf:primary ,success ,info ,dark ,warning
|
string | '' |
onKeyDown | 键盘回调 | Function | - |
enterKeyDown | 是否启用 enter 和 space 键 | Boolean | true |
setup develop environment
$ git clone https://github.com/tinper-bee/bee-switch
$ cd bee-switch
$ npm install
$ npm run dev