weex-nuke/docs/slip/demo/basic.md

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

# Slip 含各个方向

- order: 1
- title_en: In all directions

---
```js
/** @jsx createElement */
import { View, Text, Slip, Button, Icon, Dimensions, Image, Touchable, Page, ScrollView } from 'weex-nuke';

<NukePlayGround>
  // 打开容器操作
  slipTransparent() {
    this.refs.slip5.wrappedInstance.show();
  }

  // 关闭容器操作
  closeSlip() {
    this.refs.slip5.wrappedInstance.hide();
  }

  <Button style={style.btn} block type="primary" onPress={this.slipTransparent}>
    打开一个透明的浮层
  </Button>

  // direction: left right top bottom
  <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>
</NukePlayGround>
```
---

```js

import { createElement, Component, render } from 'rax';
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}
          onShow={() => {
            console.log('onshow event');
          }}
          onHide={() => {
            console.log('onhide event');
          }}>
          <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 />);
```