JSPM – @uiw/react-popover@5.0.0-bate-9

Package Exports

@uiw/react-popover
@uiw/react-popover/cjs/index.js
@uiw/react-popover/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-popover) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

点击/鼠标移入元素，弹出气泡式的卡片浮层。

import { Popover } from 'uiw';
// or
import Popover from '@uiw/react-popover';

基础用法

最简单的用法。

import React from 'react';
import { Popover, Card, Icon,Row,Col, Button } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      isOpen: false,
      isOpen1: false,
    }
  }
  onClick(field) {
    this.setState({ [field]: false });
  }

  handleVisibleChange(field, isOpen) {
    this.setState({ [field]:isOpen });
  }
  render() {
    return (
      <Row style={{ alignItems: 'center' }}>
        <Popover
          trigger="click"
          placement="top"
          isOpen={this.state.isOpen}
          onVisibleChange={this.handleVisibleChange.bind(this, 'isOpen')}
          content={
            <Card bordered={false} title="Card标题" extra={<a href="#">更多</a>} style={{ width: 200 }}>
              <div>Are you sure you want to delete these items? You won't be able to recover them.</div>
              <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>
                <Button size="small" onClick={this.onClick.bind(this, 'isOpen')}>
                  Cancel
                </Button>
                <Button type="danger" size="small" onClick={this.onClick.bind(this, 'isOpen')}>
                  Delete
                </Button>
              </div>
            </Card>
          }
        >
          <Button active={this.state.isOpen}>弹出目标</Button>
        </Popover>
        <div style={{ marginLeft: 20 }}>
          <Popover
            trigger="click"
            placement="top"
            isOpen={this.state.isOpen1}
            onVisibleChange={this.handleVisibleChange.bind(this, 'isOpen1')}
            content={
              <Card bordered={false} title="Card标题" extra={<a href="#">更多</a>} style={{ width: 200 }}>
                <div>Are you sure you want to delete these items? You won't be able to recover them.</div>
                <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>
                  <Button size="small" onClick={this.onClick.bind(this, 'isOpen1')}>
                    Cancel
                  </Button>
                  <Button type="danger" size="small" onClick={this.onClick.bind(this, 'isOpen1')}>
                    Delete
                  </Button>
                </div>
              </Card>
            }
          >
            <Icon type="setting" color="#343a40" style={{ fontSize: 20 }} />
          </Popover>
        </div>
      </Row>
    )
  }
}
export default Demo

位置

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

import React from 'react';
import { Popover, Card, Button } from 'uiw';

const btnStl = {position: 'relative', width: 70 }
const content = (
  <Card bordered={false} style={{ width: 120 }}>
    <div>Are you sure you want to delete these items? You won't be able to recover them.</div>
  </Card>
)
const Demo = () => (
  <div>
    <div style={{ position: 'relative' }}>

      <Popover trigger="click" placement="topLeft" content={content}>
        <Button style={{ ...btnStl, left: 70 }}>TL</Button>
      </Popover>
      <Popover trigger="click" placement="top" content={content}>
        <Button style={{ ...btnStl, left: 70}}>Top</Button>
      </Popover>
      <Popover trigger="click" placement="topRight" content={content}>
        <Button style={{ ...btnStl, left: 70 }}>TR</Button>
      </Popover>

    </div>
    <div style={{ position: 'relative', paddingTop: 10 }}>

      <Popover trigger="click" placement="leftTop" content={content}>
        <Button style={{ ...btnStl }}>LT</Button>
      </Popover>
      <Popover trigger="click" placement="rightTop" content={content}>
        <Button style={{ ...btnStl, left: 216 }}>RT</Button>
      </Popover>

    </div>
    <div style={{ position: 'relative', paddingTop: 10 }}>

      <Popover trigger="click" placement="left" content={content}>
        <Button style={{ ...btnStl }}>Left</Button>
      </Popover>
      <Popover trigger="click" placement="right" content={content}>
        <Button style={{ ...btnStl, left: 216 }}>Right</Button>
      </Popover>

    </div>
    <div style={{ position: 'relative', paddingTop: 10 }}>

      <Popover trigger="click" placement="leftBottom" content={content}>
        <Button style={{ ...btnStl }}>LB</Button>
      </Popover>
      <Popover trigger="click" placement="rightBottom" content={content}>
        <Button style={{ ...btnStl, left: 216 }}>RB</Button>
      </Popover>

    </div>
    <div style={{ position: 'relative', paddingTop: 10 }}>

      <Popover trigger="click" placement="bottomLeft" content={content}>
        <Button style={{ ...btnStl, left: 70 }}>BL</Button>
      </Popover>
      <Popover trigger="click" placement="bottom" content={content}>
        <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>
      </Popover>
      <Popover trigger="click" placement="bottomRight" content={content}>
        <Button style={{ ...btnStl, left: 70 }}>BR</Button>
      </Popover>

    </div>
  </div>
)
export default Demo

鼠标经过弹出目标

import React from 'react';
import { Popover, Card, Button } from 'uiw';

const btnStl = {position: 'relative', width: 70 }
const content = (
  <Card
    style={{ width: 220 }}
    bordered={false}
    title="Card标题"
    footer={
      <span>这里是页脚</span>
    }
  >
    <div>这是你鼠标经过弹出的目标。</div>
  </Card>
)
const Demo = () => (
  <div>
    <Popover trigger="hover" placement="top" content={content}>
      <Button>鼠标经过弹出目标</Button>
    </Popover>
  </div>
)
export default Demo

焦点展示

通过设置 trigger="focus" 让 Input 组件在获取焦点的时候展示 Popover

import React from 'react';
import { Popover, Card, Button, Input } from 'uiw';

const btnStl = {position: 'relative', width: 70 }
class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      isOpen: false,
      value: '',
    }
  }
  onClick(val) {
    const state = { isOpen: false }
    if (val) {
      state.value = val;
    }
    if (val === null) state.value = '';
    this.setState({ ...state });
  }
  handleVisibleChange(isOpen) {
    this.setState({ isOpen });
  }
  onChange(e) {
    this.setState({ value: e.target.value });
  }
  renderPopup() {
    return (
      <Card
        style={{ width: 220 }}
        bordered={false}
        footer={
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <Button size="small" onClick={this.onClick.bind(this, undefined)}>
              取消
            </Button>
            <Button size="small" onClick={this.onClick.bind(this, null)}>
              清空
            </Button>
            <Button type="success" size="small" onClick={this.onClick.bind(this, '这是向 Input 输入框插入的内容')}>
              插入内容
            </Button>
          </div>
        }
      >
        <div>通过设置 `trigger="focus"` 让 `Input` 组件在获取焦点的时候展示 `Popover`</div>
      </Card>
    )
  }
  render() {
    return (
      <div>
        <div style={{ width: 200 }}>
          <Popover
            trigger="focus"
            placement="top"
            isOpen={this.state.isOpen}
            onVisibleChange={this.handleVisibleChange.bind(this)}
            content={this.renderPopup()}
          >
            <Input placeholder="请输入内容" value={this.state.value} onChange={this.onChange.bind(this)}/>
          </Popover>
        </div>
      </div>
    )
  }
}
export default Demo

usePortal

设置 usePortal={false} 将模态对话框生成到根节点的里面，这样为了计算位置准确，你需要将父层样式设为 position: relative; 。

import React from 'react';
import { Popover, Card, Button } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      isOpen: false,
    }
  }
  onClick() {
    this.setState({ isOpen: false });
  }
  handleVisibleChange(isOpen) {
    this.setState({ isOpen });
  }
  render() {
    return (
      <div>
        <div style={{ position: 'relative' }}>
          <Popover
            trigger="click"
            placement="right"
            usePortal={false}
            isOpen={this.state.isOpen}
            onVisibleChange={this.handleVisibleChange.bind(this)}
            content={
              <Card bordered={false} title="Card标题" extra={<a href="#">更多</a>} style={{ width: 200 }}>
                <div>Are you sure you want to delete these items? You won't be able to recover them.</div>
                <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 15 }}>
                  <Button size="small" onClick={this.onClick.bind(this)}>
                    Cancel
                  </Button>
                  <Button type="danger" size="small" onClick={this.onClick.bind(this)}>
                    Delete
                  </Button>
                </div>
              </Card>
            }
          >
            <Button>弹出目标</Button>
          </Popover>
        </div>
      </div>
    )
  }
}
export default Demo

Confirm 用法

import React from 'react';
import { Popover, Row } from 'uiw';

class Demo extends React.Component {
  render() {
    return (
      <Row style={{ alignItems: 'center' }}>
        <Popover.Confirm title="Are you sure delete this?">delete</Popover.Confirm>
      </Row>
    )
  }
}
export default Demo

Props

参数	说明	类型	默认值
content	显示的内容	String,React.ReactNode	-
placement	气泡框位置，可现实箭头在不同的方位	Enum{`top`, `topLeft`, `topRight`, `left`, `leftTop`, `leftBottom`, `right`, `rightTop`, `rightBottom`, `bottom`, `bottomLeft`, `bottomRight`}	`top`
visibleArrow	是否显示箭头	Boolean	`true`
delay	延迟进入和消失，`{ show: 2000, hide: 4000 }` 或者直接设置 `2000`，只对 `trigger=hover` 有效，继承 `<OverlayTrigger />` 组件属性	Object/Number	-
trigger	悬停/点击弹出窗口，继承 `<OverlayTrigger />` 组件属性	Enum{`hover`, `click`, `focus`}	`hover`
disabled	是否禁用弹出目标	Boolean	`false`
isOpen	默认是否显示弹窗，继承 `<OverlayTrigger />` 组件属性	Boolean	`false`
autoAdjustOverflow	弹出层被遮挡时自动调整位置，继承 `<OverlayTrigger />` 组件属性	Boolean	`false`
onVisibleChange	显示隐藏的回调，继承 `<OverlayTrigger />` 组件属性	Function(isVisible:bool)	-

Confirm Props

参数	说明	类型	默认值
trigger	悬停/点击弹出窗口，继承 `<OverlayTrigger />` 组件属性	Enum{`hover`, `click`, `focus`}	`hover`
placement	气泡框位置，可现实箭头在不同的方位	Enum{`top`, `topLeft`, `topRight`, `left`, `leftTop`, `leftBottom`, `right`, `rightTop`, `rightBottom`, `bottom`, `bottomLeft`, `bottomRight`}	`top`
visibleArrow	是否显示箭头	Boolean	`true`
children	子元素	React.ReactNode	-
onConfirm	确定方法	()=>void
confirmText	确定按钮文本	string	Yes
title	标题信息	React.ReactNode	-
cancelText	取消按钮文本	string	No

更多属性请参考 OverlayTrigger。

@uiw/react-popover