• Popover气泡卡片
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • [nz-popover]directive
    • 注意

    Popover气泡卡片

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

    何时使用

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

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

    代码演示

    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 type="close"></i> Title</ng-template>
    10.     <ng-template #contentTemplate><i nz-icon type="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

    单独引入此组件

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

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

    [nz-popover]directive

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

    更多属性请参考 Tooltip。

    注意

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