@beisen-phoenix/popover
v3.3.55
Published
点击/鼠标移入元素,弹出气泡式的卡片浮层。
Downloads
423
Readme
点击/鼠标移入元素,弹出气泡式的卡片浮层。
概述
当目标元素有进一步的描述和相关操作时,可以收纳到卡片中,根据用户的操作行为进行展现。
和 Tooltip 的区别是,用户可以对浮层上的元素进行操作,因此它可以承载更复杂的内容,比如链接或按钮等。
API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| content | 卡片内容。 | string|ReactNode | 无 |
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true
|
| defaultVisible | 默认是否显隐 | boolean | false
|
| getPopupContainer | 浮层渲染父节点,默认渲染到 body 上 | Function(triggerNode) | () => document.body |
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip,单位:秒 | number | 0 |
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip,单位:秒 | number | 0.1 |
| extraCls | 卡片类名 | string | 无 |
| overlayStyle | 卡片样式 | object | 无 |
| placement | 气泡框位置,可选 top
left
right
bottom
topLeft
topRight
bottomLeft
bottomRight
leftTop
leftBottom
rightTop
rightBottom
| string | top |
| trigger | 触发行为,可选 hover/focus/click/contextMenu
| string | hover |
| visible | 用于手动控制浮层显隐 | boolean | false
|
| onVisibleChange | 显示隐藏的回调 | (visible) => void | 无 |
| align | 该值将合并到 placement 的配置中,设置参考 rc-tooltip | Object | 无 |
| isClearInnerPadding | 是否清除组件自身的padding设置,| boolean | false |
| isAutoContentWidth | 是否根据传入内容自定计算组件的宽度,去掉组件默认宽度限制,| boolean | false |
| isAutoContentHeight | 是否根据传入内容自定计算组件的高度,去掉组件默认高度限制,| boolean | false |
| contentWidth | 根据传入宽度设置内容区的宽度,去掉组件默认宽度限制,| number |
| contentHeight | 根据传入高度设置内容区的高度,去掉组件默认高度限制,| number |
| resize | 回调函数,当传入内容宽度高度发生变化时,可以在传入内容组件内部调用this.props.resize() 去重置popover位置。或者可以给popover声明一个ref,当传入内容宽度高度发生变化时,通过ref.resize()去重置popover位置|回调函数|无|
注意
请确保 Popover
的子元素能接受 onMouseEnter
、onMouseLeave
、onFocus
、onClick
事件。