rat-overlay

组件介绍

安装

$ npm install rat-overlay --save

引用

import Overlay from 'rat-overlay';
import Button from 'rat-button';
import Text from 'rat-text';

const { Popup } = Overlay;

render(
    <Popup trigger={<Button>Open</Button>} triggerType="click">
        <Text>
            Hello World From Popup!
        </Text>
    </Popup>);

class Demo extends Component {
    constructor(props) {
        super(props);

        this.state = {
            visible: false
        };
    }

    onClick = () => {
        this.setState({
            visible: true
        });
    }

    onClose = () => {
        this.setState({
            visible: false
        });
    }

    render() {
        return (
            <View>
                <Button onClick={this.onClick} ref={ref => {
                    this.btn = ref;
                }}>
                    Open
                </Button>
                <Overlay visible={this.state.visible}
                    safeNode={() => this.btn}
                    align="cc cc"
                    hasMask
                    disableScroll
                    onRequestClose={this.onClose}>
                    <Text>
                        Hello World From Overlay!
                    </Text>
                </Overlay>
            </View>
        );
    }
}

API

参数 | 说明 | 类型 | 默认值 | 是否必填 ----- | ----- | ------ | ------ |------ | visible | 是否显示弹层 | Boolean | false | 否 | target | 弹层定位的参照元素 | any | false | 否 | offset | 弹层相对于参照元素定位的微调 | Array | [0, 0] | 否 | hasMask | 是否显示遮罩 | Boolean | false | 否 | safeNode | 安全节点，当点击 document 的时候，如果包含该节点则不会关闭弹层，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点，或者以上值组成的数组 | any | - | 否 |