# Checkbox Demo

- order: 0

样式

---

```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 Page from 'nuke-page';
import { StyleProvider } from 'nuke-theme-provider';

let md = {
  Checkbox: {
    'small-border-radius': '10%',
    'medium-border-radius': '10%',
    'normal-bg-color': '#ffffff',
    'normal-bg-color-selected': '#DD4811',
    'normal-border-color-selected': '#DD4811',
    'empty-border-color': '#C3C5CD',
    'empty-border-color-selected': '#5688D8'
  }
};
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 (
      <StyleProvider style={md}>
        <Page title="Checkbox">
          <Page.Intro sub="普通样式" />
          <Page.Intro sub="list 样式" />
          <View style={[styles.demo_item, { flexDirection: 'column' }]}>
            <View style={styles.group_item}>
              <Checkbox size="small" defaultChecked={true} onChange={this.onChange.bind(this)} />
              <Text>area1</Text>
            </View>
            <View style={styles.group_item}>
              <Checkbox size="small" disabled onChange={this.onChange.bind(this)} />
              <Text>禁用</Text>
            </View>
            <View style={styles.group_item}>
              <Checkbox size="small" onChange={this.onChange.bind(this)} />
              <Text>area3</Text>
            </View>
            <View style={styles.group_item}>
              <Checkbox size="small" disabled onChange={this.onChange.bind(this)} />
              <Text>禁用</Text>
            </View>
          </View>
        </Page>
      </StyleProvider>
    );
  }
};

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