Popover气泡卡片

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

何时使用

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

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

单独引入此组件

想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

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

代码演示

Popover气泡卡片 - 图1

基本

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-popover-basic',
  5.   template: `
  6.     <button nz-button nz-popover nzType="primary" nzPopoverTitle="Title" nzPopoverContent="Content">
  7.       Hover me
  8.     </button>
  9.   `
  10. })
  11. export class NzDemoPopoverBasicComponent {}

Popover气泡卡片 - 图2

从浮层内关闭

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-popover-control',
  5.   template: `
  6.     <button
  7.       nz-button
  8.       nzType="primary"
  9.       nz-popover
  10.       nzPopoverTitle="Title"
  11.       [(nzVisible)]="visible"
  12.       (nzVisibleChange)="change($event)"
  13.       nzPopoverTrigger="click"
  14.       [nzPopoverContent]="contentTemplate"
  15.     >
  16.       Click me
  17.     </button>
  18.     <ng-template #contentTemplate>
  19.       <a (click)="clickMe()">Close</a>
  20.     </ng-template>
  21.   `
  22. })
  23. export class NzDemoPopoverControlComponent {
  24.   visible: boolean;
  26.   clickMe(): void {
  27.     this.visible = false;
  28.   }
  30.   change(value: boolean): void {
  31.     console.log(value);
  32.   }
  33. }

Popover气泡卡片 - 图3

模板渲染

nzContent 与 nzTitle 可以传入 TemplateRef<void> 模板渲染。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-popover-template',
  5.   template: `
  6.     <button nz-button nz-popover [nzPopoverTitle]="titleTemplate" [nzPopoverContent]="contentTemplate">
  7.       Render Template
  8.     </button>
  9.     <ng-template #titleTemplate><i nz-icon nzType="close"></i> Title</ng-template>
  10.     <ng-template #contentTemplate><i nz-icon nzType="check"></i> Content</ng-template>
  11.   `
  12. })
  13. export class NzDemoPopoverTemplateComponent {}

Popover气泡卡片 - 图4

位置

位置有十二个方向。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-popover-placement',
  5.   template: `
  6.     <div style="margin-left: 60px">
  7.       <button
  8.         nz-button
  9.         nz-popover
  10.         nzPopoverTitle="Title"
  11.         [nzPopoverContent]="contentTemplate"
  12.         nzPopoverPlacement="topLeft"
  13.       >
  14.         TL
  15.       </button>
  16.       <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverPlacement="top">
  17.         Top
  18.       </button>
  19.       <button
  20.         nz-button
  21.         nz-popover
  22.         nzPopoverTitle="Title"
  23.         [nzPopoverContent]="contentTemplate"
  24.         nzPopoverPlacement="topRight"
  25.       >
  26.         TR
  27.       </button>
  28.     </div>
  29.     <div style="width: 60px; float: left;">
  30.       <button
  31.         nz-button
  32.         nz-popover
  33.         nzPopoverTitle="Title"
  34.         [nzPopoverContent]="contentTemplate"
  35.         nzPopoverPlacement="leftTop"
  36.       >
  37.         LT
  38.       </button>
  39.       <button
  40.         nz-button
  41.         nz-popover
  42.         nzPopoverTitle="Title"
  43.         [nzPopoverContent]="contentTemplate"
  44.         nzPopoverPlacement="left"
  45.       >
  46.         Left
  47.       </button>
  48.       <button
  49.         nz-button
  50.         nz-popover
  51.         nzPopoverTitle="Title"
  52.         [nzPopoverContent]="contentTemplate"
  53.         nzPopoverPlacement="leftBottom"
  54.       >
  55.         LB
  56.       </button>
  57.     </div>
  58.     <div style="width: 60px; margin-left: 252px;">
  59.       <button
  60.         nz-button
  61.         nz-popover
  62.         nzPopoverTitle="Title"
  63.         [nzPopoverContent]="contentTemplate"
  64.         nzPopoverPlacement="rightTop"
  65.       >
  66.         RT
  67.       </button>
  68.       <button
  69.         nz-button
  70.         nz-popover
  71.         nzPopoverTitle="Title"
  72.         [nzPopoverContent]="contentTemplate"
  73.         nzPopoverPlacement="right"
  74.       >
  75.         Right
  76.       </button>
  77.       <button
  78.         nz-button
  79.         nz-popover
  80.         nzPopoverTitle="Title"
  81.         [nzPopoverContent]="contentTemplate"
  82.         nzPopoverPlacement="rightBottom"
  83.       >
  84.         RB
  85.       </button>
  86.     </div>
  87.     <div style="margin-left: 60px; clear: both;">
  88.       <button
  89.         nz-button
  90.         nz-popover
  91.         nzPopoverTitle="Title"
  92.         [nzPopoverContent]="contentTemplate"
  93.         nzPopoverPlacement="bottomLeft"
  94.       >
  95.         BL
  96.       </button>
  97.       <button
  98.         nz-button
  99.         nz-popover
  100.         nzPopoverTitle="Title"
  101.         [nzPopoverContent]="contentTemplate"
  102.         nzPopoverPlacement="bottom"
  103.       >
  104.         Bottom
  105.       </button>
  106.       <button
  107.         nz-button
  108.         nz-popover
  109.         nzPopoverTitle="Title"
  110.         [nzPopoverContent]="contentTemplate"
  111.         nzPopoverPlacement="bottomRight"
  112.       >
  113.         BR
  114.       </button>
  115.     </div>
  116.     <ng-template #contentTemplate>
  117.       <div>
  118.         <p>Content</p>
  119.         <p>Content</p>
  120.       </div>
  121.     </ng-template>
  122.   `,
  123.   styles: [
  124.     `
  125.       button {
  126.         margin-right: 8px;
  127.         margin-bottom: 8px;
  128.         width: 70px;
  129.         text-align: center;
  130.         padding: 0;
  131.       }
  132.     `
  133.   ]
  134. })
  135. export class NzDemoPopoverPlacementComponent {}

Popover气泡卡片 - 图5

箭头指向

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

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-popover-arrow-point-at-center',
  5.   template: `
  6.     <button nz-button nzPopoverTitle="Title" nzPopoverContent="Content" nzPopoverPlacement="topLeft" nz-popover>
  7.       Align edge / 边缘对齐
  8.     </button>
  9.     <button nz-button nzPopoverTitle="Title" nzPopoverContent="Content" nzPopoverPlacement="topCenter" nz-popover>
  10.       Arrow points to center / 箭头指向中心
  11.     </button>
  12.   `,
  13.   styles: [
  14.     `
  15.       button {
  16.         margin-right: 8px;
  17.         margin-bottom: 8px;
  18.       }
  19.     `
  20.   ]
  21. })
  22. export class NzDemoPopoverArrowPointAtCenterComponent {}

Popover气泡卡片 - 图6

三种触发方式

鼠标移入、聚集、点击。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'nz-demo-popover-triggerType',
  5.   template: `
  6.     <ng-template #contentTemplate>
  7.       <div>
  8.         <p>Content</p>
  9.         <p>Content</p>
  10.       </div>
  11.     </ng-template>
  12.     <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverTrigger="click">
  13.       Click me
  14.     </button>
  15.     <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverTrigger="hover">
  16.       Hover me
  17.     </button>
  18.     <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverTrigger="focus">
  19.       Focus me
  20.     </button>
  21.   `,
  22.   styles: [
  23.     `
  24.       button {
  25.         margin-right: 8px;
  26.       }
  27.     `
  28.   ]
  29. })
  30. export class NzDemoPopoverTriggerTypeComponent {}

API

[nz-popover]directive

参数说明类型默认值
[nzPopoverTitle]标题string | TemplateRef<void>-
[nzPopoverContent]用于定义内容string | TemplateRef<void>-
[nzPopoverTrigger]触发行为'click' | 'focus' | 'hover''hover'
[nzPopoverPlacement]气泡框位置'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom''top'

更多属性请参考 Tooltip。

注意

请确保 nz-popover 的子元素能接受 onMouseEnter、onMouseLeave、onFocus、onClick 事件。