weex-nuke/src/node_modules/nuke-input/docs/keyboard.md

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

# Input demo

* order: 1

不同键盘类型

---

```js
/** @jsx createElement */
import { createElement, Component, findDOMNode, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Input from 'nuke-input';
import Button from 'nuke-button';
import Page from 'nuke-page';

let App = class Demo extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <Page title="Input">
        <Page.Intro main="type" />
        <View style={styles.lineWithMargin}>
          <Input placeholder="password" type="password" />
        </View>
        <Page.Intro sub="email" />
        <View style={styles.lineWithMargin}>
          <Input placeholder="email" type="email" />
        </View>
        <Page.Intro sub="url" />
        <View style={styles.lineWithMargin}>
          <Input placeholder="url" type="url" />
        </View>
        <Page.Intro sub="tel" />
        <View style={styles.lineWithMargin}>
          <Input placeholder="tel" type="tel" />
        </View>
        <Page.Intro sub="date" />
        <View style={styles.lineWithMargin}>
          <Input placeholder="date" type="date" />
        </View>
        <Page.Intro sub="time" />
        <View style={styles.lineWithMargin}>
          <Input placeholder="time" type="time" />
        </View>
        <Page.Intro sub="number" />
        <View style={styles.lineWithMargin}>
          <Input placeholder="number" type="tel" />
        </View>

        <Page.Intro main="return key" />
        <View style={styles.lineWithMargin}>
          <Input placeholder="next" returnKeyType="next" />
        </View>
        <View style={styles.lineWithMargin}>
          <Input placeholder="search" returnKeyType="search" />
        </View>
        <View style={styles.lineWithMargin}>
          <Input placeholder="send" returnKeyType="send" />
        </View>
        <View style={styles.lineWithMargin}>
          <Input placeholder="done" returnKeyType="done" />
        </View>
      </Page>
    );
  }
};
const styles = {
  lineWithMargin: {
    marginLeft: 30,
    marginRight: 30
  },
  text: {
    fontSize: 26
  }
};
render(<App />);
```