# Checkbox Demo

* order: 2

label 的正序与倒序使用方式

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Checkbox from 'nuke-checkbox';
import Button from 'nuke-button';
import Page from 'nuke-page';
import Touchable from 'nuke-touchable';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.GroupFruit = [
      { value: 'apple', label: '苹果' },
      { value: 'pear', label: '梨' },
      { value: 'orange', label: '橘子' },
    ];
    this.state = {
      fruitChecked: ['apple'],
      groupChecked: [],
    };
  }

  onChange = value => {
    console.log('=---->', value);
    this.setState({
      fruitChecked: value,
    });
  };

  render() {
    return (
      <Page title="Checkbox Group">
        <Page.Intro main="倒序" />
        <View style={styles.main}>
          <Checkbox.Group
            value={this.state.fruitChecked}
            onChange={this.onChange}
            reverse={true}
            groupItemStyle={styles.touchable}
            labelStyle={{ color: '#9999' }}
            size="small"
            dataSource={this.GroupFruit}
          />
        </View>
        <Page.Intro main="正序" />
        <View style={styles.main}>
          <Checkbox.Group
            value={this.state.fruitChecked}
            onChange={this.onChange}
            reverse={false}
            groupItemStyle={styles.touchable}
            size="small"
            dataSource={this.GroupFruit}
          />
        </View>
      </Page>
    );
  }
};

const styles = {
  main: {
    width: 750,
    marginTop: 30,
    justifyContent: 'center',
  },
  touchable: {
    width: 750,
    height: 80,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomWidth: 2,
    borderBottomColor: '#F7F8FA',
    borderBottomStyle: 'solid',
    paddingLeft: 20,
    backgroundColor: '#ffffff',
  },
  text: {
    color: '#424242',
  },
};
render(<App />);
```