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

/bee-radio/

    Package Sidebar

    Install

    npm i bee-radio

    Weekly Downloads

    95

    Version

    2.1.6

    License

    MIT

    Unpacked Size

    56.4 kB

    Total Files

    19

    Last publish

    Collaborators

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