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

    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 事件。