Angular动画Popover组件

Angular动画Popover组件
插件名称 popover
发布时间 2020年7月25日
插件作者 ncstate-sat

一个动画的,高度可定制的Popover组件,用于Angular应用。

安装:

npm install –save @ncstate/sat-popover @angular/cdk

用法

入门

将要显示在弹出框中的任何组件与<sat-popover>组件一起包装。

<sat-popover>
  <app-contact-overview [contact]="myContact"></app-contact-overview>
</sat-popover>

接下来,将satPopoverAnchor指令应用于您希望成为弹出锚的元素,并将<sat-popover>组件作为参数传递给satPopoverAnchor指令。

<button [satPopoverAnchor]='popover' (click)="popover.toggle()">
  看到联系方式
</button>

<sat-popover #popover hasBackdrop>
  <app-contact-overview [contact]="myContact"></app-contact-overview>
</sat-popover>

或者,向弹出框提供锚定元素。

<button satPopoverAnchor #anchor=satPopoverAnchor (click)="anchor.popover.toggle()">
  看到联系方式
</button>

<sat-popover [anchor]="anchor" hasBackdrop>
  <app-contact-overview [contact]="myContact"></app-contact-overview>
</sat-popover>

对准

默认情况下,弹出窗口将显示在锚点上方的中心位置。如果您希望弹出窗口显示在锚点下方:

<sat-popover verticalAlign="below">
  <!-- ... -->
</sat-popover>