# Slip Demo

* order: 1

含各个方向 demo

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Slip from 'nuke-slip';
import Button from 'nuke-button';
import Icon from 'nuke-icon';
import Dimensions from 'nuke-dimensions';
import Image from 'nuke-image';
import Touchable from 'nuke-touchable';
import Page from 'nuke-page';
import ScrollView from 'nuke-scroll-view';
const { height } = Dimensions.get('window');
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.slipFromLeft = this.slipFromLeft.bind(this);
    this.slipFromRight = this.slipFromRight.bind(this);
    this.slipFromTop = this.slipFromTop.bind(this);
    this.slipFromBottom = this.slipFromBottom.bind(this);
    this.slipTransparent = this.slipTransparent.bind(this);
    this.closeSlip = this.closeSlip.bind(this);
  }
  slipFromLeft() {
    this.refs.slip1.wrappedInstance.show();
  }
  slipFromRight() {
    this.refs.slip2.wrappedInstance.show();
  }
  slipFromTop() {
    this.refs.slip3.wrappedInstance.show();
  }
  slipFromBottom() {
    this.refs.slip4.wrappedInstance.show();
  }

  slipTransparent() {
    this.refs.slip5.wrappedInstance.show();
  }
  closeSlip() {
    this.refs.slip5.wrappedInstance.hide();
  }
  render() {
    return (
      <Page title="Slip">
        <Page.Intro main="各种方向的浮层" />
        <Button
          style={style.btn}
          block
          type="secondary"
          onPress={this.slipFromLeft}
        >
          左侧弹出一个面板
        </Button>
        <Button
          style={style.btn}
          block
          type="secondary"
          onPress={this.slipFromRight}
        >
          右侧弹出一个面板
        </Button>
        <Button
          style={style.btn}
          block
          type="secondary"
          onPress={this.slipFromTop}
        >
          顶部弹出一个面板
        </Button>
        <Button
          style={style.btn}
          block
          type="secondary"
          onPress={this.slipFromBottom}
        >
          底部弹出一个面板
        </Button>
        <Button
          style={style.btn}
          block
          type="primary"
          onPress={this.slipTransparent}
        >
          打开一个透明的浮层
        </Button>
        <View style={{ height: 2000, backgroundColor: 'orange' }} />
        <Slip ref="slip1" direction="left" width={400} maskClosable={true} />
        <Slip ref="slip2" direction="right" width={200} maskClosable={true} />
        <Slip ref="slip3" direction="top" height={100} maskClosable={true} />
        <Slip ref="slip4" direction="bottom" height={600} maskClosable={true}>
          <ScrollView style={{ flex: 1 }}>
            <View style={{ backgroundColor: 'red', height: 250 }} />
            <View style={{ backgroundColor: 'yellow', height: 250 }} />
            <View style={{ backgroundColor: 'blue', height: 250 }} />
          </ScrollView>
        </Slip>
        <Slip
          ref="slip5"
          direction="bottom"
          height={parseInt(height)}
          contentStyle={style.contentStyle}
        >
          <View style={style.body}>
            <Image
              style={style.img}
              source={{
                uri:
                  'https://img.alicdn.com/tfs/TB1BVBvagvD8KJjy0FlXXagBFXa-698-1030.jpg'
              }}
            />
          </View>
          <Button style={style.close} onPress={this.closeSlip}>
            close
          </Button>
        </Slip>
      </Page>
    );
  }
};
const style = {
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  btn: {
    marginBottom: 20
  },
  icon: {
    fontSize: 42,
    position: 'absolute',
    top: 20,
    right: 20
  },
  contentStyle: {
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'center'
  },
  body: {
    width: 600,
    height: parseInt(height) - 400,
    backgroundColor: '#ffffff'
  },
  img: {
    width: 600,
    height: parseInt(height) - 400,
    quality: 'original'
  },
  close: {
    borderRadius: 60,
    width: 120,
    height: 120,
    position: 'absolute',
    backgroundColor: 'transparent',
    bottom: 40,
    left: 315,
    justifyContent: 'center',
    alignItems: 'center',
    color: '#ffffff'
  },
  iconBottom: {
    fontSize: 32,

    color: '#ffffff'
  }
};
render(<App />);
```