rat-overlay

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	-	否