0.1.5 • Published 5 years ago

@ciri/ngx-popup v0.1.5

Weekly downloads
9
License
MIT
Repository
github
Last release
5 years ago

NgxPopup

An angular popup component that can customize animation.

development environment: angular 8.2.14

šŸ‘‰ 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

NameTypeDefaultDescription
positionstringcenterCan be set to top right bottom left
animationsobject-Custom animation
overlaybooleantrueWhether to show overlay
overlayOpacitynumber0.5Set overlay opacity
closeOnClickOverlaybooleantrueWhether to close when click overlay
externalClassobject-Custom class, equivalent to ngClass
zIndexnumber9999Increasing from 9999

🐚 Outputs

EventDescription
clickOverlayTriggered when click overlay
beforeOpenTriggered when before opening (Enter animation has not been executed)
afterOpenTriggered when after opening (Enter animation completed)
beforeCloseTriggered when before closing (Leave animation has not been executed)
afterCloseTriggered when after closing (Leave animation completed)
0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.0

5 years ago

0.1.1

5 years ago

1.0.0

5 years ago

0.0.7

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.6

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago