# 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 Page from 'nuke-page';
import Slip from 'nuke-slip';
import Button from 'nuke-button';
import { appInfo } from 'nuke-env';
import { StyleProvider } from 'nuke-theme-provider';

const isAndroid = appInfo.platform.toLowerCase() === 'android';

let md = {
  Core: {
    [`color-brand1-1`]: '#00BBD3',
    [`color-brand1-6`]: isAndroid ? '#1A9CB7' : '#DCDEE3',
    [`color-brand1-9`]: '#0096A6',
    [`color-error-3`]: '#D50000'
  }
};

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      status: 'error'
    };
    this.slipFromLeft = this.slipFromLeft.bind(this);
    this.slipFromRight = this.slipFromRight.bind(this);
  }
  slipFromLeft() {
    this.refs.slip1.wrappedInstance.show();
  }
  slipFromRight() {
    this.refs.slip2.wrappedInstance.show();
  }
  render() {
    return (
      <StyleProvider style={md} androidConfigs={{ materialDesign: isAndroid }}>
        <Page title="md 风格">
          <View style={{ height: 2000, backgroundColor: '#ff6600' }}>
            <Button
              style={styles.btn}
              block
              type="secondary"
              onPress={this.slipFromLeft}
            >
              左侧弹出一个面板
            </Button>
          </View>
          <View style={{ height: 200, backgroundColor: '#3089dc' }} />
          <Slip ref="slip1" direction="left" width={400} maskClosable={true} />
        </Page>
      </StyleProvider>
    );
  }
};
const styles = {
  btn: {
    marginBottom: 20
  }
};
render(<App />);
```