rat-overlay
0.1.28 • Public • Published 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 |
- |
否 |
Package Sidebar
Install
Weekly Downloads