weex-nuke/src/node_modules/nuke-number-picker/docs/basic.md

基于 Rax 、Weex 的高性能组件体系 ~~

# 包含onChange, step, error样式等能力

* order: 0
- title_en: includes API of onChange, step, error...

包含 onChange、step,error 样式等。

---
```js
<NukePlayGround>
  <NumberPicker
    min={1}
    max={10}
    autoCorrect={true}
    defaultValue={2}
    onChange={this.changeHandle}
    step={3}
  />
</NukePlayGround>
```
---

```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';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
  }
  changeHandle = val => {
  //  alert(val);
  };
  render() {
    return (
      <Page title="Number Picker">
        
        
        <Page.Intro main="1-10 之间" />
        <View style={styles.npwrapper}>
          <NumberPicker
            min={1}
            max={10}
            defaultValue={2}
            onChange={this.changeHandle}
            step={1}
          />
        </View>
        <Page.Intro main="autoCorrect 超出 10 自动修正" />
        <View style={styles.npwrapper}>
          <NumberPicker
            min={1}
            max={10}
            autoCorrect={true}
            defaultValue={2}
            onChange={this.changeHandle}
            step={3}
          />
        </View>
        <Page.Intro main="disabled" />
        <View style={styles.npwrapper}>
          <NumberPicker
            disabled
            min={1}
            max={1000}
            defaultValue={2}
            onChange={this.changeHandle}
            step={3}
          />
        </View>
      </Page>
    );
  }
};
const styles = {
  npwrapper: {
    width: 300,
    // backgroundColor:'red',
    padding: 40
  }
};
render(<App />);
```