Skip to content
a bee-radio-group component for tinper-bee
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
demo
dist
docs
src
test
.eslintignore
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
README.md
index.html
package-lock.json
package.json

README.md

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
You can’t perform that action at this time.