# Input Demo

* order: 4
* hide: true

material design 定制

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Input from 'nuke-input';
import Page from 'nuke-page';
import { isWeb, appInfo } from 'nuke-env';
import { StyleProvider } from 'nuke-theme-provider';

const isAndroid = appInfo.platform.toLowerCase() === 'android';
let md = {
  Core: {
    [`color-brand1-6`]: '#ff6600'
  },
  Input: {
    'clear-top': 30,
    'clear-right': 24,
    'single-radius':20,
    'placeholder-color':'blue',
  }
};

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      status: 'error'
    };
  }
  change = () => {
    console.log('1213');
    this.setState({
      status: 'success'
    });
  };
  render() {
    return (
      <StyleProvider style={md} androidConfigs={{ materialDesign: isAndroid }}>
        <Page title="用安卓打开或 h5 切安卓 UA">
          <Page.Intro main="normal" />
          <View style={styles.lineWithMargin}>
            <Input type="text" placeholder="Type something" placeholderColor="red" />
          </View>
          <Page.Intro main="normal" />
          <View style={styles.lineWithMargin}>
            <Input
              defaultValue={'Input text for a single line field with a max'}
              type="text"
              placeholder="Single-line input label"
              hasClear={true}
            />
          </View>
          <Page.Intro main="error" />
          <View style={styles.lineWithMargin}>
            <Input
              status={this.state.status}
              defaultValue={'Input text for a single line field with a max'}
              type="text"
              onChange={this.change}
              placeholder="Single-line input label"
              errorMessage={'try again!!!'}
            />
          </View>
          <Page.Intro main="textarea" />
          <View style={styles.lineWithMargin}>
            <Input
              defaultValue={this.state.defaultValue}
              style={styles.textarea}
              rows={30}
              multiple={true}
              placeholder="介绍一下"
              returnKeyType="next"
              onChange={this.changeHandler}
              onInput={this.inputHandler}
              onReturn={this.returnHandler}
            />
          </View>
        </Page>
      </StyleProvider>
    );
  }
};

const styles = {
  lineWithMargin: {
    marginLeft: '30rem',
    marginRight: '30rem'
  },
  textarea: {
    height: 200,
    marginBottom: 20,
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#cccccc'
  },
  text: {
    fontSize: 26
  },
  result: {
    height: 200,
    margin: 10,
    padding: 10
  },
  resultLabel: {
    color: '#999999'
  },
  resultText: {
    lines: 10,
    fontSize: 28,
    marginTop: 10
  },
  row: {
    paddingLeft: 30,
    paddingRight: 30
  }
};

render(<App />);
```