bee-radio-group
Version:
radio-group ui component for react
93 lines (75 loc) • 2.47 kB
Markdown
[](https://www.npmjs.com/package/bee-radio-group)
[](https://travis-ci.org/tinper-bee/bee-radio-group)
[](https://coveralls.io/github/tinper-bee/bee-radio-group?branch=master)
单选框组合
RadioGroup将Radio集成为自己的子组件。故API需注意。
使用单独的bee-radio-group包
先进行下载bee-radio-group包
```
npm install --save bee-radio-group
```
组件调用
```js
import RadioGroup from 'bee-radio-group';
const RadioApp = React.createClass({
getInitialState() {
return {selectedValue: 'apple'};
},
handleChange(value) {
this.setState({selectedValue: value});
},
render() {
return (
<RadioGroup
name="fruit"
selectedValue={this.state.selectedValue}
onChange={this.handleChange}>
<label>
<RadioGroup.Radio colors="warning" value="apple" >apple</RadioGroup.Radio>
</label>
<label>
<RadioGroup.Radio value="orange" >Orange</RadioGroup.Radio>
</label>
<label>
<RadioGroup.Radio value="watermelon" >Watermelon</RadioGroup.Radio>
</label>
</RadioGroup>
);
}
});
React.render(<RadioApp />, document.getElementById('target'));
```
- 可以使用link引入dist目录下bee-radio.css
```
<link rel="stylesheet" href="./node_modules/build/bee-radio-group.css">
```
- 可以在js中import样式
```js
import "./node_modules/src/RadioGroup.scss"
//或是
import "./node_modules/build/bee-radio-group.css"
```
|参数|说明|类型|默认值|
|---|----|---|------|
|color|one of: `primary` `success` `info` `error` `warning` `dark`|string|''|
|disabled|是否可用|bool|false|
|参数|说明|类型|默认值|
|---|----|---|------|
|onChange|暴露在外层的触发radio是否选中的方法|func|''|
|selectedValue|被选中的radio值|string|''|
|name|radio组名|string|''|
|Children|Radio子组件|obj|''|
```sh
$ git clone https://github.com/tinper-bee/bee-radio-group
$ cd bee-radio-group
$ npm install
$ npm run dev
```