Checkbox

• category: UI
• chinese: 复选框组件
• type: UI component

Weex-Nuke UI

Usage

The Checkbox component is similar to the Switch component. There are only two states of opening and closing, but have different using scenes.

Switch is usually used for single scattered configuration item settings, but Checkbox is usually used for the selection of multiple data in a data source.

API

| Parameters | Description | Type | Default | | -------------- | -------------------------------------------- | ------------------- | ------------------ | | size | SIZE | string | medium(or small) | | checked | checked, or not | boolean | null | | defaultChecked | default checked | boolean | false | | disabled | disable, or not | boolean | false | | onChange | the callback function when the state changes | function(checked,e) | null | | type | checkbox type | string | normal(list,empty) | | touchStyle | touch area style | object | {} |

Checkbox.Group

| Parameters | Description | Type | Default | | -------------- | -------------------------------------------- | ------------------- | ------- | | dataSource | data source | array | [] | | value | selected items | array | [] | | onChange | the callback function when the state changes | function(checked,e) | null | | style | the group style in whole container | Object | {} | | reverse | reverse the show order of label and checkbox | bool | false | | renderItem | custom render method for each item | function | () | | groupItemStyle | each item's wrap style | object | {} |

Usage in controlled or uncontrolled

All input and interaction class components have controlled usage and uncontrolled usage.

• Controlled usage: component status is affected by external incoming props. The external props changes, so that the components will change, such as:

constructor() {
    super();
    this.state = {
        checked: true
    }
}
change = (value) => {
    this.setState({
        checked:!value
    });
}
//...
render(){
    return (<Checkbox checked={this.state.checked} onChange={this.change}/>)
}

• Uncontrolled usage: The component itself changes freely and changes what is externally changed through the event, such as:

change = (value) => {
    console.log('switch change to: ',value);
}
//...
render(){
    return (<Checkbox defaultChecked={true} onChange={this.change}/>)
}

Demo Reference

Scan the qr code to preview( use apps like Taobao, Qianniu, Tmall... )

How to use

• install

// Switch to your rax project

npm i nuke-checbox --save

// following that demo, maybe you also need this...
// tnpm i nuke-view nuke-page nuke-text --save

• example

/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Checkbox from 'nuke-checkbox';
import Page from 'nuke-page';
const themeOrange = '#ff6600';
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      checked: false
    };
  }

  onChange(value) {
    console.log(value);
  }
  changeControl(value) {
    this.setState({
      checked: value
    });
  }

  render() {
    return (
      <Page title="Checkbox">
        <Page.Intro sub="普通样式" />
        <View style={styles.demo_item}>
          <View style={styles.group_item}>
            <Checkbox
              defaultChecked={true}
              size="small"
              onChange={this.onChange.bind(this)}
            />
            <Text>苹果</Text>
          </View>
          <View style={styles.group_item}>
            <Checkbox size="small" onChange={this.onChange.bind(this)} />
            <Text>梨</Text>
          </View>
        </View>
        <Page.Intro sub="空心样式" />
        <View style={styles.demo_item}>
          <View style={styles.group_item}>
            <Checkbox
              defaultChecked={true}
              type="empty"
              size="small"
              onChange={this.onChange.bind(this)}
            />
            <Text>苹果</Text>
          </View>
          <View style={styles.group_item}>
            <Checkbox
              size="small"
              type="empty"
              onChange={this.onChange.bind(this)}
            />
            <Text>梨</Text>
          </View>
        </View>
        <Page.Intro sub="list 样式" />
        <View style={[styles.demo_item, { flexDirection: 'column' }]}>
          <View style={styles.group_item}>
            <Checkbox
              defaultChecked={true}
              type="list"
              size="small"
              onChange={this.onChange.bind(this)}
            />
            <Text>浙江省杭州市余杭区</Text>
          </View>
          <View style={styles.group_item}>
            <Checkbox
              size="small"
              type="list"
              onChange={this.onChange.bind(this)}
            />
            <Text>浙江省杭州市临安市</Text>
          </View>
        </View>

        <Page.Intro main="自定义大小颜色" />
        <View style={styles.demo_item}>
          <Checkbox
            style={{ width: '30rem', height: '30rem', fontSize: '20rem' }}
            defaultChecked={true}
            size="small"
            checkedStyle={{ backgroundColor: themeOrange }}
            unCheckedStyle={{ backgroundColor: themeOrange }}
            onChange={this.onChange.bind(this)}
          />
          <Checkbox
            defaultChecked={true}
            size="small"
            type="empty"
            checkedStyle={{ borderColor: themeOrange, color: themeOrange }}
            unCheckedStyle={{ borderColor: themeOrange }}
            onChange={this.onChange.bind(this)}
          />
          <Checkbox
            defaultChecked={true}
            size="small"
            type="list"
            checkedStyle={{ color: themeOrange }}
            onChange={this.onChange.bind(this)}
          />
        </View>
      </Page>
    );
  }
};

const styles = {
  demo_item: {
    width: 750,
    marginTop: 30,
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    alignItem: 'center',
    paddingLeft: 12
  },
  group_item: {
    height: 104,
    flexDirection: 'row',
    borderBottomWidth: '2rem',
    borderBottomStyle: 'solid',
    borderBottomColor: '#F7F8FA',
    alignItems: 'center'
  }
};

render(<App />);

The Other

• Chat with @ 翊晨 [yichen] in Dingtalk desktop App Download
• DingTalk Group