Popover气泡卡片
Popover
气泡卡片
点击/鼠标移入元素,弹出气泡式的卡片浮层。
使用import{ Popover }from"antd"; |
文档编辑此页 |
当目标元素有进一步的描述和相关操作时,可以收纳到卡片中,根据用户的操作行为进行展现。
和 Tooltip
的区别是,用户可以对浮层上的元素进行操作,因此它可以承载更复杂的内容,比如链接或按钮等。
通用属性参考:通用属性
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
content | 卡片内容 | ReactNode | () => ReactNode | - | |
title | 卡片标题 | ReactNode | () => ReactNode | - |
更多属性请参考 Tooltip。
请确保 Popover
的子元素能接受 onMouseEnter
、onMouseLeave
、onFocus
、onClick
事件。
Token 名称 | 描述 | 类型 | 默认值 |
---|---|---|---|
titleMinWidth | 气泡卡片标题最小宽度 | string | number | 177 |
zIndexPopup | 气泡卡片 z-index | number | 1030 |
这是由于 rc-trigger
的实现方式导致的,rc-trigger
强制要求 children 能够接受 ref,否则就会 fallback 到 findDOMNode,所以 children 需要是原生 html 标签,如果不是,则需要使用 React.forwardRef
把 ref
透传到原生 html 标签。
请确保 Popover
的子元素能接受 onMouseEnter
、onMouseLeave
、onPointerEnter
、onPointerLeave
、onFocus
、onClick
事件。
更多问题,请参考 Tooltip FAQ。