# NumberPicker demo

* order: 1

包含 onChange、step,error 样式等。

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Page from 'nuke-page';
import NumberPicker from 'nuke-number-picker';
import { StyleProvider } from 'nuke-theme-provider';
let orange = {
  Core: {
    [`color-brand1-1`]: '#FFF0E6',
    [`color-brand1-6`]: '#FF6A00',
    [`color-brand1-9`]: '#E35300',
    'color-text1-1': '#9E9E9E'
  },
  NumberPicker: {
    'button-width': 64,
    'button-height': 64,
    'icon-size': 26,
    'border-width': 0,
    'icon-color': '#9e9e9e',
    'button-bg-color': '#EFF0F5',
    'button-bg-color-disabled': '#FAFAFA',
    'button-bg-color-active': '#DADADA',
    'input-bg-color-disabled': '#ffffff'
  }
};

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      num: 3
    };
  }
  componentDidMount() {
    // setTimeout(() => {
    //   this.setState({ num: 2 });
    // }, 4000);
  }
  changeHandle = e => {
    console.log(e);
  };
  render() {
    return (
      <StyleProvider style={orange} androidConfigs={{ materialDesign: true }}>
        <Page title="Number Picker">
          <Page.Intro main="基础用法" />
          <View style={styles.npwrapper}>
            <NumberPicker
              min={1}
              max={10}
              defaultValue={this.state.num}
              onChange={this.changeHandle}
              step={3}
              style={{ width: 220 }}
            />
          </View>
          <View style={styles.npwrapper}>
            <NumberPicker
              min={1}
              max={10}
              defaultValue={this.state.num}
              onChange={this.changeHandle}
              editable={false}
              step={3}
              style={{ width: 220 }}
            />
          </View>
          <View style={styles.npwrapper}>
            <NumberPicker
              min={1}
              max={10}
              defaultValue={this.state.num}
              onChange={this.changeHandle}
              disabled
              step={3}
              style={{ width: 220 }}
            />
          </View>
        </Page>
      </StyleProvider>
    );
  }
};
const styles = {
  npwrapper: {
    width: 300,
    padding: 40
  }
};
render(<App />);
```