@uiw/react-overlay-trigger

OverlayTrigger 基础触发弹出
===


基础弹出触发组件，在组件 的基础上添加事件和 12 个方向的位置，组件 ， 是基于这个组件封装的，弹出框围绕对象指定位置。

``jsx
import { OverlayTrigger } from 'uiw';
// or
import OverlayTrigger from '@uiw/react-overlay-trigger';
`

$3

最简单的用法。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { OverlayTrigger } from 'uiw';

const tooltip = (


export default Demo;
`

$3

下面配合 组件使用。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { OverlayTrigger, Card } from 'uiw';

const card = (

Hellow uiw! Check this info.

展示 12 个方向位置

);
const Demo = () => (

鼠标移动到此处，显示和消失触发事件

)
export default Demo;
`

$3

位置有 12 个方向，根据 placement 参数来设置。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { OverlayTrigger, Card, Button } from 'uiw';
const btnStl = {position: 'relative', width: 70, height: 50 }

const card = (

Hellow uiw! Check this info.

展示 12 个方向位置

);
const Demo = () => (


默认离开触发区域隐藏弹出目标，设置 isOutside 值为 true，在触发区域或弹出目标区域内，不隐藏弹出目标。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { OverlayTrigger, Card, Divider } from 'uiw';

const card = (

Hellow uiw! Check this info.

展示 12 个方向位置

);

class Demo extends React.Component {
constructor() {
super()
this.state = {
isVisbale: false,
}
}
onVisibleChange(isVisbale) {
this.setState({ isVisbale })
}
render() {
return (


延迟属性，只针对 trigger=hover 有效。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { OverlayTrigger, Card } from 'uiw';

const card = (

Hellow uiw! Check this info.

展示 12 个方向位置

);
const Demo = () => (

鼠标移动到此处，显示和消失触发事件，延迟 4s 消失

)
export default Demo;
`

$3

通过设置属性 isOpen 可以文字提示手动控制状态的展示。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { OverlayTrigger, Card, Divider, Switch } from 'uiw';

const card = (

Hellow uiw! Check this info.

展示 12 个方向位置

);

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 (


设置 usePortal={false} 将模态对话框生成到根节点的里面。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { OverlayTrigger, Card, Divider } from 'uiw';

const card = (

Hellow uiw! Check this info.

展示 12 个方向位置

);

class Demo extends React.Component {
constructor() {
super()
this.state = {
isOpen: false,
}
}
onVisibleChange(isOpen) {
this.setState({ isOpen })
}
render() {
return (


| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| 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。