-
组件布局 Layout视图 View导航 Navigation反馈 Feedback
气泡卡片 Popoverissue v3.1.1- v3.1.1
- v3.1.0
- v3.0.7
- v3.0.6
- v3.0.5
- v3.0.4
- v3.0.3
- v3.0.2
- v3.0.1
- v3.0.0
- v2.0.2
- v2.0.1
- v2.0.0
- v1.0.6
- v1.0.4
- v1.0.3
- v1.0.2
v3.1.1
- v3.1.1
- v3.1.0
- v3.0.7
- v3.0.6
- v3.0.5
- v3.0.4
- v3.0.3
- v3.0.2
- v3.0.1
- v3.0.0
- v2.0.2
- v2.0.1
- v2.0.0
- v1.0.6
- v1.0.4
- v1.0.3
- v1.0.2
点击元素弹出气泡弹出框。
何时使用
例如: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.0.6 2019-11-06 ( release地址 )
- bee-popover @3.0.6
- [Update]解决外部控制 visible 状态时,必须传 onHide 方法的问题。
- bee-popover @3.0.6
-
v3.0.3 2019-09-21 ( release地址 )
- bee-popover @3.0.3
- [Feature]支持自定义属性。
- bee-popover @3.0.3
-
v2.0.2 2019-04-28 ( release地址 )
- bee-popover @2.0.2
- [Fixbug]解决设置positionLeft和positionTop属性无效的问题
- bee-popover @2.0.2
-
v2.0.1 2019-04-25 ( release地址 )
- bee-popover @2.0.1
- [Fixbug]解决placement属性设置为topRight时,控制台打印warning的问题
- bee-popover @2.0.1