Popover气泡卡片

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

何时使用

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

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

代码演示

Popover气泡卡片 - 图1

基本

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

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

Popover气泡卡片 - 图2

从浮层内关闭

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

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

Popover气泡卡片 - 图3

模板渲染

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

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

Popover气泡卡片 - 图4

位置

位置有十二个方向。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-popover-placement',
  4. template: `
  5. <div style="margin-left: 60px">
  6. <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="topLeft">TL</button>
  7. <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="top">Top</button>
  8. <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="topRight">TR</button>
  9. </div>
  10. <div style="width: 60px; float: left;">
  11. <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="leftTop">LT</button>
  12. <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="left">Left</button>
  13. <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="leftBottom">LB</button>
  14. </div>
  15. <div style="width: 60px; margin-left: 252px;">
  16. <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="rightTop">RT</button>
  17. <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="right">Right</button>
  18. <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="rightBottom">RB</button>
  19. </div>
  20. <div style="margin-left: 60px; clear: both;">
  21. <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="bottomLeft">BL</button>
  22. <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="bottom">Bottom</button>
  23. <button nz-button nz-popover nzTitle="Title" [nzContent]="contentTemplate" nzPlacement="bottomRight">BR</button>
  24. </div>
  25. <ng-template #contentTemplate>
  26. <div>
  27. <p>Content</p>
  28. <p>Content</p>
  29. </div>
  30. </ng-template>
  31. `,
  32. styles: [
  33. `
  34. button {
  35. margin-right: 8px;
  36. margin-bottom: 8px;
  37. width: 70px;
  38. text-align: center;
  39. padding: 0;
  40. }
  41. `
  42. ]
  43. })
  44. export class NzDemoPopoverPlacementComponent {}

Popover气泡卡片 - 图5

箭头指向

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

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

Popover气泡卡片 - 图6

三种触发方式

鼠标移入、聚集、点击。

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

API

单独引入此组件

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

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

[nz-popover]directive

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

更多属性请参考 Tooltip

注意

请确保 nz-popover 的子元素能接受 onMouseEnteronMouseLeaveonFocusonClick 事件。