Nuke-checkbox NPM

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 />);