Popover气泡卡片

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

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

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

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

    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. })

    Popover气泡卡片 - 图2

    从浮层内关闭

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

    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">
    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

    位置

    位置有十二个方向。

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

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

    三种触发方式

    鼠标移入、聚集、点击。

    更多属性请参考 。

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