Angular的精美动画工具提示和Popover库– Helipopper

Angular的精美动画工具提示和Popover库– Helipopper
插件名称 helipopper
发布时间 2020年6月19日
插件作者 ngneat

Helipopper是用于Angular应用程序的功能丰富的动画工具提示和弹出库。

特征:

  • 智能自动定位。
  • 自定义对齐和放置。
  • 延迟注册以获得更好的性能。
  • 自定义触发事件:悬停,单击等
  • 允许您自定义模板。
  • 以及更多。

基本用法:

1.安装Helipopper库并将其导入到Angular项目中。

ng add @ngneat/helipopper
import { HelipopperModule } from '@ngneat/helipopper';

2.将Helipopper添加到您的应用程序模块。

@NgModule({
  declarations: [AppComponent],
  imports: [HelipopperModule.forRoot()],
  bootstrap: [AppComponent]
  ...
})
export class AppModule {}

3.定义工具提示内容。

<button helipopper="Tooltip Content Here">
  我有一个工具提示
</button>

4.使用您自己的模板创建一个弹出框。

<ng-template #tpl>
  <div *ngFor="let msg of messages">{{ msg }}</div>
  <button (click)="talk()">点击我</button>
</ng-template>