气泡卡片 Popover
issue

点击元素弹出气泡弹出框。

何时使用

例如：table内确认删除气泡弹出框

如何使用

import { Popover } from 'tinper-bee';

or

import Popover from 'bee-popover';
import 'bee-popover/build/Popover.css';

能力特性

API

参数 说明 类型 默认值
id 标示弹出层 string/number -
title 卡片标题 string/ReactNode -
content 卡片内容 string/ReactNode -
placement 弹出位置 可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom right
positionTop 弹出框向上偏移量 string/number -
positionLeft 弹出框向左偏移量 string/number -
container 容器 ReactNode/function body
trigger 触发现实和隐藏的事件类型 click / hover / focus "hover"
show 控制显示和隐藏，注意：需要和 onHide 事件结合使用 bool -
defaultOverlayShown 默认显示的状态 bool false
onHide 隐藏时的回调，点击热区之外的地方时触发 function -
onVisibleChange 显示状态改变时触发的回调 function -

注意事项

  • trigger 为 "click" 时，点击除弹出层外的任意地方，默认会隐藏弹出层。
  • 若设置了参数 show ，来控制显示和隐藏的话，需要结合 onHide 事件一起使用，避免出现：在点击除弹出层外的任意地方时，组件状态未及时更新的问题。具体代码如下：
    <Popover
  id="demo2"
  placement="right"
  title={<h3>请确认您的包裹已签收！</h3>}
  content={content}
  show={this.state.show}
  onHide={this.onHide}
>
  <Button colors="primary" onClick={ this.show }>确认按钮</Button>
</Popover>

更新日志

  • v3.1.1 2020-04-24 ( release地址 ) 

    Bug Fixes

  • v3.0.6 2019-11-06 ( release地址 ) 

      

    • bee-popover @3.0.6
        

      • [Update]解决外部控制 visible 状态时，必须传 onHide 方法的问题。
        • 

      

      •

  • v3.0.3 2019-09-21 ( release地址 ) 

      

    • bee-popover @3.0.3
        

      • [Feature]支持自定义属性。
        • 

      

      •

  • v2.0.2 2019-04-28 ( release地址 ) 

      

    • bee-popover @2.0.2
        

      • [Fixbug]解决设置positionLeft和positionTop属性无效的问题
        • 

      

      •

  • v2.0.1 2019-04-25 ( release地址 ) 

      

    • bee-popover @2.0.1
        

      • [Fixbug]解决placement属性设置为topRight时，控制台打印warning的问题
        • 

      

      •

相关资源

社区

帮助

联系我们

  • 北京市海淀区北清路68号用友产业园
  • guoyff@yonyou.com

版权所有：用友网络科技股份有限公司 2017 京ICP备05007539号-7 京ICP证100714号 京公网安备1101080209224号

Powered by yonyou