Write less code, do more things!

文档

basic

基础使用

markdown

var React = require('react')
var Radio = require('radio.react')
var { RadioGroup } = Radio
class GroupBasic extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            basic: 'c'
        }
    }
    render () {
        let self = this
        return (
            <div className="groupBasicDemo" >
                <RadioGroup 
                    name="groupBasic"
                    value={self.state.basic}
                    onChange={function(value){
                        console.log(value)
                        self.setState({
                            basic : value
                        })
                    }}
                >
                    <Radio value={'a'} >radio</Radio>
                    <Radio value={'b'} >radio</Radio>
                    <Radio value={'c'} disabled={true} >disabled | checked:true</Radio>
                    <Radio value={'d'} disabled={true} >disabled | checked: false</Radio>
                </RadioGroup>
            </div>
        )
    }
}

module.exports = GroupBasic


style

基础使用

markdown

var React = require('react')
var Radio = require('radio.react')
var { RadioGroup } = Radio
class GroupStyle extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            horiz: false ,
            border: true ,
            separate: false ,
            hideicon: true ,
            basic: 'c'
        }
    }
    render () {
        let self = this
        return (
            <div className="groupBasicDemo" >
                style default : 
                <label>
                    <input type="checkbox" checked={self.state.horiz} onChange={()=>{ self.setState({horiz:!self.state.horiz}) }} />
                    horiz
                </label>
                <label>
                    <input type="checkbox" checked={self.state.border} onChange={()=>{ self.setState({border:!self.state.border}) }} />
                    border
                </label>
                <label>
                    <input type="checkbox" checked={self.state.separate} onChange={()=>{ self.setState({separate:!self.state.separate}) }} />
                    separate
                </label>
                <label>
                    <input type="checkbox" checked={self.state.hideicon} onChange={()=>{ self.setState({hideicon:!self.state.hideicon}) }} />
                    hideicon
                </label>
                <hr />
                组件显示 : <br/>

                <RadioGroup 
                    name="groupStyle"
                    value={self.state.basic}
                    onChange={function(value){
                        console.log(value)
                        self.setState({
                            basic : value
                        })
                    }}
                    horiz={self.state.horiz}
                    border={self.state.border}
                    separate={self.state.separate}
                    hideicon={self.state.hideicon}
                >
                    <Radio value={'a'} >radio</Radio>
                    <Radio value={'b'} >radio</Radio>
                    <Radio value={'c'} disabled={true} >disabled | checked:true</Radio>
                    <Radio value={'d'} disabled={true} >disabled | checked: false</Radio>
                </RadioGroup>
            </div>
        )
    }
}

module.exports = GroupStyle


size

更改方式 参考

Github
radio.react - 项目源码
相关站点
component-spec - 组件规范
module - 开源项目脚手架
onface.cc - 资源集合