Neurosis Prevention Mechanism

    @ciri/ngx-popup
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.5 • Public • Published

    NgxPopup

    An angular popup component that can customize animation.

    development environment: angular 8.2.14

    travis 

    👉 Demo

    🚀 Install

    npm i @ciri/ngx-popup

    🎉 Quick Start

    Add it to your module:

    import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
    import { PopupModule } from '@ciri/ngx-popup'
    
    @NgModule({
      // ...
      imports: [
        // ...
        BrowserAnimationsModule,
        PopupModule
      ],
    })

    Add to view:

    <ngx-popup [(ngModel)]="visible">
      <div style="background: #fff; padding: 50px;">hello world</div>
    </ngx-popup>

    📌 Set Position

    <ngx-popup [(ngModel)]="visible" position="bottom"></ngx-popup>

    🎁 Custom Animation

    import { Component, OnInit } from '@angular/core'
    import { animate, style } from '@angular/animations'
    
    @Component({
      selector: 'app-root',
      template: `
        <ngx-popup [(ngModel)]="visible" [animations]="animations">
          <div style="padding: 100px; background: #fff"></div>
        </ngx-popup>
    
        <button (click)="show()">show</button>&nbsp;
      `
    })
    export class AppComponent implements OnInit {
      visible = false
      animations = {
        enter: [
          style({ opacity: 0, transform: 'scale(0.7)' }),
          animate('.3s ease', style({ opacity: 1, transform: 'scale(1)' }))
        ],
        leave: [
          style({ opacity: 1, transform: 'scale(1)' }),
          animate('.3s ease', style({ opacity: 0, transform: 'scale(0.9)' }))
        ]
      }
    
      constructor() {}
    
      ngOnInit() {}
    
      show() {
        this.visible = true
      }
    }

    🍭 Inputs

    Name Type Default Description
    position string center Can be set to top right bottom left
    animations object - Custom animation
    overlay boolean true Whether to show overlay
    overlayOpacity number 0.5 Set overlay opacity
    closeOnClickOverlay boolean true Whether to close when click overlay
    externalClass object - Custom class, equivalent to [ngClass]
    zIndex number 9999 Increasing from 9999

    🐚 Outputs

    Event Description
    clickOverlay Triggered when click overlay
    beforeOpen Triggered when before opening (Enter animation has not been executed)
    afterOpen Triggered when after opening (Enter animation completed)
    beforeClose Triggered when before closing (Leave animation has not been executed)
    afterClose Triggered when after closing (Leave animation completed)

    Install

    npm i @ciri/ngx-popup

    DownloadsWeekly Downloads

    7

    Version

    0.1.5

    License

    MIT

    Unpacked Size

    333 kB

    Total Files

    32

    Last publish

    Collaborators

    • xiaojun1994