NgxFlypanel
Installation
npm i ngx-flypanel --save
Then add NgxFlypanelModule into imports of your module
ex: app.module.ts
import { NgxFlypanelModule } from 'ngx-flypanel';
imports: [
BrowserModule,
NgxFlypanelModule <----
],
For issues
Raise issues here.
Usage
<ngx-flypanel [width]="620" [open]="panels.right" [placement]="'right'" [scrollToTop]="true"
[backdrop]="true" [position]="'fixed'" (whenClose)="panels.right = false">
<div flypanel-header>
<p>
Heading <i>With custom html tag</i>
</p>
</div>
<div flypanel-content>
<h1>Right side panel</h1>
<h1>Right side panel</h1>
<h1>Right side panel</h1>
<h1>Right side panel</h1>
</div>
</ngx-flypanel>
<button (click)="panels.right = !panels.right">Toggle</button>
<ngx-flypanel [width]="320" [open]="boolVal" [placement]="'right'" [position]="'relative'" (whenClose)="boolVal = false">
<div flypanel-header>
<h1>Hello flypanel heading</h1>
</div>
<div flypanel-content>
<my-component></my-component>
</div>
</ngx-flypanel>
<button (click)="boolVal = !boolVal">Toggle</button>
Input properties
@Input() id: string;
@Input() open = false; // open or close flypanel
@Input() headerStyle = {}; // style for #header tag
@Input() placement: 'left' | 'rigth' | 'bottom' = 'rigth'; // placement of panel
@Input() height = 300; // height applicable when placement is 'bottom'
@Input() width = 250; // width applicable when its 'right' or 'left' placement
@Input() position: 'fixed' | 'relative' = 'fixed'; // position fixed on based on parent
@Input() top = 0; // top for placement of flypanel
@Input() backdrop: boolean; // transparent background like bootstrap model
@Input() backdropTop = 0; // top value for backdrop
@Input() scrollToTop = false;
@Input() maxHeight;
Output properties
@Output() whenOpen = new EventEmitter<any>();
@Output() whenClose = new EventEmitter<any>();
@Output() whenResize = new EventEmitter<any>();
@Output() whenScrollToTop = new EventEmitter<any>();
Features!
- Resizable height, when the placement is in bottom
- Backdrop option is available
- Easy to manage the styles of your component because ngx-flypanel is just a wrapper around your content
- Flypanel can be overlay or push other content based on position 'fixed' or 'relative' property
- id property used to track multiple flypanel in same page
- headerStyle is an object which helps to overried header style