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