Popover气泡卡片

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

何时使用

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

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

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

代码演示

基本

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-popover-basic',
  template: `
    <button nz-button nz-popover nzType="primary" nzPopoverTitle="Title" nzPopoverContent="Content">
      Hover me
    </button>
  `
})
export class NzDemoPopoverBasicComponent {}

从浮层内关闭

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-popover-control',
  template: `
    <button
      nz-button
      nzType="primary"
      nz-popover
      nzPopoverTitle="Title"
      [(nzPopoverVisible)]="visible"
      (nzPopoverVisibleChange)="change($event)"
      nzPopoverTrigger="click"
      [nzPopoverContent]="contentTemplate"
    >
      Click me
    </button>
    <ng-template #contentTemplate>
      <a (click)="clickMe()">Close</a>
    </ng-template>
  `
})
export class NzDemoPopoverControlComponent {
  visible: boolean = false;
  clickMe(): void {
    this.visible = false;
  }
  change(value: boolean): void {
    console.log(value);
  }
}

模板渲染

nzPopoverContent 与 nzPopoverTitle 可以传入 TemplateRef<void> 模板渲染。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-popover-template',
  template: `
    <button nz-button nz-popover [nzPopoverTitle]="titleTemplate" [nzPopoverContent]="contentTemplate">
      Render Template
    </button>
    <ng-template #titleTemplate><i nz-icon nzType="close"></i> Title</ng-template>
    <ng-template #contentTemplate><i nz-icon nzType="check"></i> Content</ng-template>
  `
})
export class NzDemoPopoverTemplateComponent {}

位置

位置有十二个方向。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-popover-placement',
  template: `
    <div style="margin-left: 60px">
      <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverPlacement="topLeft">
        TL
      </button>
      <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverPlacement="top">
        Top
      </button>
      <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverPlacement="topRight">
        TR
      </button>
    </div>
    <div style="width: 60px; float: left;">
      <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverPlacement="leftTop">
        LT
      </button>
      <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverPlacement="left">
        Left
      </button>
      <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverPlacement="leftBottom">
        LB
      </button>
    </div>
    <div style="width: 60px; margin-left: 252px;">
      <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverPlacement="rightTop">
        RT
      </button>
      <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverPlacement="right">
        Right
      </button>
      <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverPlacement="rightBottom">
        RB
      </button>
    </div>
    <div style="margin-left: 60px; clear: both;">
      <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverPlacement="bottomLeft">
        BL
      </button>
      <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverPlacement="bottom">
        Bottom
      </button>
      <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverPlacement="bottomRight">
        BR
      </button>
    </div>
    <ng-template #contentTemplate>
      <div>
        <p>Content</p>
        <p>Content</p>
      </div>
    </ng-template>
  `,
  styles: [
    `
      button {
        margin-right: 8px;
        margin-bottom: 8px;
        width: 70px;
        text-align: center;
        padding: 0;
      }
    `
  ]
})
export class NzDemoPopoverPlacementComponent {}

箭头指向

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-popover-arrow-point-at-center',
  template: `
    <button nz-button nzPopoverTitle="Title" nzPopoverContent="Content" nzPopoverPlacement="topLeft" nz-popover>
      Align edge / 边缘对齐
    </button>
    <button nz-button nzPopoverTitle="Title" nzPopoverContent="Content" nzPopoverPlacement="topCenter" nz-popover>
      Arrow points to center / 箭头指向中心
    </button>
  `,
  styles: [
    `
      button {
        margin-right: 8px;
        margin-bottom: 8px;
      }
    `
  ]
})
export class NzDemoPopoverArrowPointAtCenterComponent {}

三种触发方式

鼠标移入、聚集、点击。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-popover-trigger-type',
  template: `
    <ng-template #contentTemplate>
      <div>
        <p>Content</p>
        <p>Content</p>
      </div>
    </ng-template>
    <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverTrigger="click">
      Click me
    </button>
    <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverTrigger="hover">
      Hover me
    </button>
    <button nz-button nz-popover nzPopoverTitle="Title" [nzPopoverContent]="contentTemplate" nzPopoverTrigger="focus">
      Focus me
    </button>
  `,
  styles: [
    `
      button {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoPopoverTriggerTypeComponent {}

API

[nz-popover]directive

更多属性请参考 Tooltip。

注意

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