Popover气泡卡片

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

何时使用#

当目标元素有进一步的描述和相关操作时,可以收纳到卡片中,根据用户的操作行为进行展现。

Tooltip 的区别是,用户可以对浮层上的元素进行操作,因此它可以承载更复杂的内容,比如链接或按钮等。

import { NzPopoverModule } from 'ng-zorro-antd/popover';

代码演示

最简单的用法,浮层的大小由内容区域决定。

expand codeexpand code
      加载中
    

使用 nzPopoverVisible 属性控制浮层显示。

expand codeexpand code
      加载中
    

nzPopoverContentnzPopoverTitle 可以传入 TemplateRef<void> 模板渲染。

expand codeexpand code
      加载中
    

位置有十二个方向。

expand codeexpand code
      加载中
    

通过设置 nzPopoverPlacement ,可以箭头将指向目标元素的中心。

expand codeexpand code
      加载中
    

鼠标移入、聚集、点击。

expand codeexpand code
      加载中
    

API#

[nz-popover]#

参数说明类型默认值
[nzPopoverArrowPointAtCenter]箭头指向锚点的中心booleanfalse
[nzPopoverTitle]标题string | TemplateRef<void>-
[nzPopoverContent]用于定义内容string | TemplateRef<void>-
[nzPopoverTrigger]触发行为,为 null 时不响应光标事件'click' | 'focus' | 'hover' | null'hover'
[nzPopoverPlacement]气泡框位置'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom' | Array<string>'top'
[nzPopoverOrigin]气泡框定位元素ElementRef-
[nzPopoverVisible]显示隐藏气泡框booleanfalse
(nzPopoverVisibleChange)显示隐藏的事件EventEmitter<boolean>-
[nzPopoverMouseEnterDelay]鼠标移入后延时多少才显示气泡框,单位:秒number0.15
[nzPopoverMouseLeaveDelay]鼠标移出后延时多少才隐藏气泡框,单位:秒number0.1
[nzPopoverOverlayClassName]卡片类名string-
[nzPopoverOverlayStyle]卡片样式object-
[nzPopoverBackdrop]浮层是否应带有背景板booleanfalse

更多属性请参考 Tooltip

注意#

请确保 [nz-popover] 元素能接受 onMouseEnteronMouseLeaveonFocusonClick 事件。