weex-nuke/docs/input/demo/keyboard.md

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

# Input demo

* order: 1

不同键盘类型

---

```js
/** @jsx createElement */
import { View, Text, Input, Button, Page } from 'weex-nuke';
import { createElement, Component, findDOMNode, render } from 'rax';
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 />);
```