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" nzTitle="Title" nzContent="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.       nzTitle="Title"
  11.       [(nzVisible)]="visible"
  12.       (nzVisibleChange)="change($event)"
  13.       nzTrigger="click"
  14.       [nzContent]="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 [nzTitle]="titleTemplate" [nzContent]="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 nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="topLeft">TL</button>
  8.       <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="top">Top</button>
  9.       <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="topRight">TR</button>
  10.     </div>
  11.     <div style="width: 60px; float: left;">
  12.       <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="leftTop">LT</button>
  13.       <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="left">Left</button>
  14.       <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="leftBottom">LB</button>
  15.     </div>
  16.     <div style="width: 60px; margin-left: 252px;">
  17.       <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="rightTop">RT</button>
  18.       <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="right">Right</button>
  19.       <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="rightBottom">RB</button>
  20.     </div>
  21.     <div style="margin-left: 60px; clear: both;">
  22.       <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="bottomLeft">BL</button>
  23.       <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="bottom">Bottom</button>
  24.       <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="bottomRight">BR</button>
  25.     </div>
  26.     <ng-template #contentTemplate>
  27.       <div>
  28.         <p>Content</p>
  29.         <p>Content</p>
  30.       </div>
  31.     </ng-template>
  32.   `,
  33.   styles: [
  34.     `
  35.       button {
  36.         margin-right: 8px;
  37.         margin-bottom: 8px;
  38.         width: 70px;
  39.         text-align: center;
  40.         padding: 0;
  41.       }
  42.     `
  43.   ]
  44. })
  45. 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 nzTitle="Title" nzContent="Content" nzPlacement="topLeft" nz-popover>
  7.       Align edge / 边缘对齐
  8.     </button>
  9.     <button nz-button nzTitle="Title" nzContent="Content" nzPlacement="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 nzTitle="Title" [nzContent]="contentTemplate" nzTrigger="click">Click me</button>
  13.     <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzTrigger="hover">Hover me</button>
  14.     <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzTrigger="focus">Focus me</button>
  15.   `,
  16.   styles: [
  17.     `
  18.       button {
  19.         margin-right: 8px;
  20.       }
  21.     `
  22.   ]
  23. })
  24. export class NzDemoPopoverTriggerTypeComponent {}

API

[nz-popover]directive

参数说明类型默认值
[nzTitle]卡片标题string | TemplateRef<void>-
[nzContent]用于定义Content内容string | TemplateRef<void>-

更多属性请参考 Tooltip。

注意

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