0.1.3 • Published 7 years ago

bee-radio-group v0.1.3

Weekly downloads
3
License
MIT
Repository
github
Last release
7 years ago

bee-radio-group

npm version Build Status Coverage Status

单选框组合

RadioGroup将Radio集成为自己的子组件。故API需注意。

使用

使用单独的bee-radio-group包

组件引入

先进行下载bee-radio-group包

npm install --save bee-radio-group

组件调用

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样式
import "./node_modules/src/RadioGroup.scss"
//或是
import "./node_modules/build/bee-radio-group.css"

API

RadioGroup.Radio

参数说明类型默认值
colorone of: primary success info error warning darkstring''
disabled是否可用boolfalse

RadioGroup

参数说明类型默认值
onChange暴露在外层的触发radio是否选中的方法func''
selectedValue被选中的radio值string''
nameradio组名string''
ChildrenRadio子组件obj''

开发调试

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