Package Exports
- @uiw/react-overlay-trigger
- @uiw/react-overlay-trigger/cjs/index.js
- @uiw/react-overlay-trigger/esm/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/react-overlay-trigger) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
OverlayTrigger 基础触发弹出
基础弹出触发组件,在组件 <Overlay>
的基础上添加事件和 12 个方向的位置,组件 <Tooltip>
,<Popover>
是基于这个组件封装的,弹出框围绕对象指定位置。
import { OverlayTrigger } from 'uiw';
// or
import OverlayTrigger from '@uiw/react-overlay-trigger';
基础用法
最简单的用法。
import React from 'react';
import { OverlayTrigger } from 'uiw';
const tooltip = (
<div style={{ backgroundColor: '#fff', border: '1px solid #333', padding: 10, borderRadius: 3 }}>
<strong>Hellow uiw!</strong> Check this info.<br />
展示 12 个方向位置
</div>
);
const Demo = () => (
<OverlayTrigger placement="top" trigger="click" overlay={tooltip}>
<span>鼠标移动到此处,点击显示和消失触发事件</span>
</OverlayTrigger>
)
export default Demo
配合组件使用
下面配合 <Card />
组件使用。
import React from 'react';
import { OverlayTrigger, Card } from 'uiw';
const card = (
<Card active>
<strong>Hellow uiw!</strong> Check this info.<br />
展示 12 个方向位置
</Card>
);
const Demo = () => (
<OverlayTrigger placement="top" overlay={card}>
<span>鼠标移动到此处,显示和消失触发事件</span>
</OverlayTrigger>
)
export default Demo
位置
位置有 12 个方向,根据 placement 参数来设置。
import React from 'react';
import { OverlayTrigger, Card, Button } from 'uiw';
const btnStl = {position: 'relative', width: 70, height: 50 }
const card = (
<Card active>
<strong>Hellow uiw!</strong> Check this info.<br />
展示 12 个方向位置
</Card>
);
const Demo = () => (
<div>
<div style={{ position: 'relative' }}>
<OverlayTrigger disabled placement="topLeft" overlay={card}>
<Button style={{ ...btnStl, left: 70 }}>TL</Button>
</OverlayTrigger>
<OverlayTrigger placement="top" overlay={card}>
<Button style={{ ...btnStl, left: 70}}>Top</Button>
</OverlayTrigger>
<OverlayTrigger placement="topRight" overlay={card}>
<Button style={{ ...btnStl, left: 70 }}>TR</Button>
</OverlayTrigger>
</div>
<div style={{ position: 'relative', paddingTop: 10 }}>
<OverlayTrigger placement="leftTop" overlay={card}>
<Button style={{ ...btnStl }}>LT</Button>
</OverlayTrigger>
<OverlayTrigger placement="rightTop" overlay={card}>
<Button style={{ ...btnStl, left: 216 }}>RT</Button>
</OverlayTrigger>
</div>
<div style={{ position: 'relative', paddingTop: 10 }}>
<OverlayTrigger placement="left" overlay={card}>
<Button style={{ ...btnStl }}>Left</Button>
</OverlayTrigger>
<OverlayTrigger placement="right" overlay={card}>
<Button style={{ ...btnStl, left: 216 }}>Right</Button>
</OverlayTrigger>
</div>
<div style={{ position: 'relative', paddingTop: 10 }}>
<OverlayTrigger placement="leftBottom" overlay={card}>
<Button style={{ ...btnStl }}>LB</Button>
</OverlayTrigger>
<OverlayTrigger placement="rightBottom" overlay={card}>
<Button style={{ ...btnStl, left: 216 }}>RB</Button>
</OverlayTrigger>
</div>
<div style={{ position: 'relative', paddingTop: 10 }}>
<OverlayTrigger placement="bottomLeft" overlay={card}>
<Button style={{ ...btnStl, left: 70 }}>BL</Button>
</OverlayTrigger>
<OverlayTrigger placement="bottom" overlay={card}>
<Button style={{ ...btnStl, left: 70 }}>Bottom</Button>
</OverlayTrigger>
<OverlayTrigger placement="bottomRight" overlay={card}>
<Button style={{ ...btnStl, left: 70 }}>BR</Button>
</OverlayTrigger>
</div>
</div>
)
export default Demo
鼠标经过事件
默认离开触发区域隐藏弹出目标,设置 isOutside
值为 true
,在触发区域或弹出目标区域内,不隐藏弹出目标。
import React from 'react';
import { OverlayTrigger, Card, Divider } from 'uiw';
const card = (
<Card active>
<strong>Hellow uiw!</strong> Check this info.<br />
展示 12 个方向位置
</Card>
);
class Demo extends React.Component {
constructor() {
super()
this.state = {
isVisbale: false,
}
}
onVisibleChange(isVisbale) {
this.setState({ isVisbale })
}
render() {
return (
<div>
<OverlayTrigger
placement="top"
isOutside={true}
onVisibleChange={this.onVisibleChange.bind(this)}
overlay={card}
>
<span>鼠标移动到此处,显示和消失触发事件</span>
</OverlayTrigger>
<Divider />
<div>状态:{this.state.isVisbale ? '' : '不'}可见</div>
</div>
)
}
}
export default Demo
延迟进入和消失
延迟属性,只针对 trigger=hover
有效。
import React from 'react';
import { OverlayTrigger, Card } from 'uiw';
const card = (
<Card active>
<strong>Hellow uiw!</strong> Check this info.<br />
展示 12 个方向位置
</Card>
);
const Demo = () => (
<OverlayTrigger delay={{ show: 0, hide: 4000 }} placement="top" overlay={card}>
<span>鼠标移动到此处,显示和消失触发事件,延迟 `4s` 消失</span>
</OverlayTrigger>
)
export default Demo
组件受控
通过设置属性 isOpen 可以文字提示手动控制状态的展示。
import React from 'react';
import { OverlayTrigger, Card, Divider, Switch } from 'uiw';
const card = (
<Card active>
<strong>Hellow uiw!</strong> Check this info.<br />
展示 12 个方向位置
</Card>
);
class Demo extends React.Component {
constructor() {
super()
this.state = {
isOpen: false,
}
}
onChange(e) {
this.clickChecked = false;
this.setState({ isOpen: e.target.checked });
}
onVisibleChange(isOpen) {
console.log('onVisibleChange: ', isOpen);
this.setState({ isOpen: isOpen });
}
render() {
return (
<div>
<OverlayTrigger
onVisibleChange={this.onVisibleChange.bind(this)}
isOpen={this.state.isOpen}
placement="right"
onEnter={(node, isAppearing) => {
console.log('~~', node, isAppearing);
}}
overlay={card}
>
<span>鼠标移动到此处,显示和消失触发事件</span>
</OverlayTrigger>
<Divider />
<Switch checked={this.state.isOpen} onChange={this.onChange.bind(this)} />
</div>
);
}
}
export default Demo
usePortal
设置 usePortal={false}
将模态对话框生成到根节点的里面。
import React from 'react';
import { OverlayTrigger, Card, Divider } from 'uiw';
const card = (
<Card active>
<strong>Hellow uiw!</strong> Check this info.<br />
展示 12 个方向位置
</Card>
);
class Demo extends React.Component {
constructor() {
super()
this.state = {
isOpen: false,
}
}
onVisibleChange(isOpen) {
this.setState({ isOpen })
}
render() {
return (
<div>
<div style={{ position: 'relative' }}>
<OverlayTrigger
usePortal={false}
isOutside={true}
autoAdjustOverflow
placement="top"
trigger="click"
onVisibleChange={this.onVisibleChange.bind(this)}
overlay={card}
>
<span>鼠标移动到此处,点击显示和消失触发事件</span>
</OverlayTrigger>
</div>
<Divider />
<div>状态:{this.state.isOpen ? '' : '不'}可见</div>
</div>
);
}
}
export default Demo
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
placement | 指定弹出框位置 | Enum{top , topLeft , topRight ,left , leftTop , leftBottom ,right , rightTop , rightBottom ,bottom , bottomLeft , bottomRight } |
- |
trigger | 悬停/点击弹出窗口 | Enum{hover , click , focus } |
hover |
disabled | 是否禁用弹出目标 | Boolean | false |
overlay | 弹出内容 | Function/Element | - |
delay | 延迟进入和消失,{ show: 2000, hide: 4000 } 或者直接设置 2000 ,只对 trigger=hover 有效 |
Object/Number | - |
isOpen | 默认是否显示弹窗 | Boolean | false |
isOutside | 默认离开触发区域隐藏弹出目标,设置值为 true ,在触发区域和弹出目标区域内,不隐藏弹出目标。 |
Boolean | false |
isClickOutside | 点击目标区域以外的区域,是否隐藏。 | Boolean | true |
autoAdjustOverflow | 弹出层被遮挡时自动调整位置 | Boolean | false |
onVisibleChange | 显示隐藏的回调 | Function(isVisiable:bool) | - |
更多属性文档请参考 Overlay。