Netherworld's Pretend Minibar
Wondering what’s next for npm?Check out our public roadmap! »

@uiw/react-overlay-triggerTypeScript icon, indicating that this package has built-in type declarations

4.7.7 • Public • Published

OverlayTrigger 基础触发弹出

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

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

基础用法

最简单的用法。

import ReactDOM from 'react-dom';
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>
)
ReactDOM.render(<Demo />, _mount_);

配合组件使用

下面配合 <Card /> 组件使用。

import ReactDOM from 'react-dom';
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>
)
ReactDOM.render(<Demo />, _mount_);

点击事件

import React from 'react';
import ReactDOM from 'react-dom';
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 = {
      visiable: false,
    }
  }
  onClick(e, visiable) {
    this.setState({ visiable })
  }
  render() {
    return (
      <div>
        <OverlayTrigger
          placement="top"
          trigger="click"
          overlay={card}
          onVisibleChange={(visiable) => {
    				this.setState({ visiable })
          }}
        >
          <span onClick={this.onClick.bind(this)}>鼠标<b>点击</b>此处,显示和消失触发子组件事件</span>
        </OverlayTrigger>
        <Divider />
        <div>状态:{this.state.visiable ? '' : ''}可见</div>
      </div>
    )
  }
}
ReactDOM.render(<Demo />, _mount_);

鼠标经过事件

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

import React from 'react';
import ReactDOM from 'react-dom';
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>
    )
  }
}
ReactDOM.render(<Demo />, _mount_);

延迟进入和消失

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

import ReactDOM from 'react-dom';
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>
)
ReactDOM.render(<Demo />, _mount_);

组件受控

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

import React from 'react';
import ReactDOM from 'react-dom';
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);
  }
  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>
    );
  }
}
ReactDOM.render(<Demo />, _mount_);

usePortal

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

import React from 'react';
import ReactDOM from 'react-dom';
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>
    );
  }
}
ReactDOM.render(<Demo />, _mount_);

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

Install

npm i @uiw/react-overlay-trigger

DownloadsWeekly Downloads

419

Version

4.7.7

License

MIT

Unpacked Size

202 kB

Total Files

84

Last publish

Collaborators

  • avatar