Radio 单选框

API#

Radio#

属性	说明	类型	默认值
checked	是否选中,group中的选中不适用该API，而是通过value设置	boolean
disabled	是否禁用	boolean	false
size	大小	string(small,medium)	medium
onChange	状态改变时的回调函数	function(checked,e)
type	单选框类型	string（'normal'，'list'）	normal

Radio.group#

属性	说明	类型	默认值
value	当前选择的值	any	''
onChange	选中值发生改变后的回调	function(value,e)	()=>{}
dataSource	可选数据源	array	[]

设计思路#

rx中只提供了一个简单的textinput，因为会触发键盘，因此需要使用view和image结合的方式实现。从外观表现和交互逻辑上，单个radio和checkbox的表现是完全一致的。两者仅有的区别在于批量使用时。

代码演示

预览二维码


/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text} from 'nuke-components';
import { Radio,Button } from 'nuke';
import {mount} from 'nuke-mounter';


let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.state = {
            checked:true
        }
    }

    onChange(value){
        console.log('checked',value);
    } 
    onPress(){
        let tmp = this.state.checked;
        this.setState({
            checked:!tmp
            })
    }

    render() {
        return (
            <View> 
               <Text>受限使用</Text> 
               <Button onPress={this.onPress.bind(this)}>{this.state.checked}</Button>
               <Radio size="small" checked={this.state.checked} onChange={this.onChange}></Radio>
               <Text>非受限使用</Text> 
               <Radio checked={true} onChange={this.onChange}></Radio>
            </View>

        );
    }
}

mount(<App/>, mountNode);

单选框

普通单选框。

预览二维码


/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text} from 'nuke-components';
import { Radio,Button } from 'nuke';
import {mount} from 'nuke-mounter';


let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.state = {
            value:1
        }
    }

    onChange(value){
        this.setState({
            value:value
        })
    } 
    press(){
        let tmp = this.state.value;
        this.setState({
            value:++tmp
        });
        console.log(this.state);
    }
    render() {
         const dataSource = [
            {value:1, label: '苹果'},
            {value:2, label: '梨'},
            {value:3, label: '橘子'}
        ];
        return (
            <View>
               <Button onPress={this.press.bind(this)}>受限使用+{ this.state.value }</Button>
               <Radio.Group value={this.state.value} onChange={ this.onChange.bind(this) } size="small" dataSource={ dataSource }></Radio.Group>
            </View>

        );
    }
}

mount(<App/>, mountNode);

单选框数据源

设置单选框组的数据源

预览二维码


/** @jsx createElement */
import {createElement, Component} from 'weex-rx';
import { View, Text} from 'nuke-components';
import { Radio,Button } from 'nuke';
import {mount} from 'nuke-mounter';


let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.state = {
            value:2
        }
    }

    groupChange(value){
         this.setState({
            value:value
            });
        console.log('group',value);
    }

    onChange(value){

        console.log('item',value);
    } 
    press(){
        let tmp = this.state.value;
        this.setState({
            value:++tmp
            });
    }

    render() {
        const {value} = this.state;
        return (
            <View> 
                <Button onPress={this.press.bind(this)}>受限使用+{value}</Button>
                <Radio.Group onChange = {this.groupChange.bind(this)} value={value}>
                    <Radio size="small" style={{marginTop:'10px'}} value={1} onChange={this.onChange.bind(this)}></Radio>
                    <Radio size="small" style={{marginTop:'10px'}} value={2} onChange={this.onChange.bind(this)}></Radio>
                    <Radio size="small" style={{marginTop:'10px'}} value={3} onChange={this.onChange.bind(this)}></Radio>
                </Radio.Group>                                              
            </View>

        );
    }
}

mount(<App/>, mountNode);

单选框

单选框组。