Nostalgic Primordial Monster

    bee-radio

    2.1.6 • Public • Published

    bee-radio

    npm version Build Status Coverage Status

    单选.

    使用

    使用单独的bee-radio包

    组件引入

    先进行下载bee-radio包

    npm install --save bee-radio
    

    组件调用

    import Radio from 'bee-radio';
    RadioGroup = Radio.RadioGroup;
     
    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>
              <Radio colors="warning" value="apple" >apple</Radio>
            </label>
            <label>
              <Radio value="orange" >Orange</Radio>
            </label>
            <label>
              <Radio value="watermelon" >Watermelon</Radio>
            </label>
          </RadioGroup>
        );
      }
    });
     
    React.render(<RadioApp />, document.getElementById('target'));
     

    样式引入

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

    API

    Radio

    参数 说明 类型 默认值
    color one of: primary success info danger warning dark string ''
    disabled 是否可用 bool false
    style 添加style object {}
    className 传入列的classname String -
    inverse 设置选中为红色填充 bool false

    RadioButton

    参数 说明 类型 默认值
    color one of: primary success info danger warning dark string -
    size one of: lg sm string -
    disabled 是否可用 bool false

    RadioGroup

    参数 说明 类型 默认值
    onChange 暴露在外层的触发radio是否选中的方法 func ''
    selectedValue 被选中的radio值 string ''
    name radio组名 string ''
    Children 必填,Radio子组件 node -

    已支持的键盘操作

    按键 功能
    space 选中/反选Radio
    →(右箭)、↓(下箭) 将焦点移动到下一个Radio上,依次循环选中
    ←(左箭)、↑(上箭) 将焦点移动到上一个Radio上,依次循环选中

    开发调试

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

    Install

    npm i bee-radio

    DownloadsWeekly Downloads

    578

    Version

    2.1.6

    License

    MIT

    Unpacked Size

    56.4 kB

    Total Files

    19

    Last publish

    Collaborators

    • honely1314
    • xiaoshutong
    • yonyoufed
    • jonyw
    • guoyongfeng
    • kvkens
    • whizbz
    • npm_yx
    • bjyxszd
    • tinper-bot
    • houjitong
    • gaox2025f
    • gcht163
    • cnkvkens
    • diozhu
    • wangjings123
    • ahua52