Nitro Popup
This Documentation is incomplete, please check this link for detailed Documentation.
Nitro Popup can be used for Popups
/ Modals
/ Dialog
Boxes and even also this can be used as context menu also. Inbuilt support added for overriding context menus.
Features:
- Light weight
- Fully configurable with just one JSON object for each Popup
- Layouts & Templates can be controlled using
<ng-template>
- Easy Override with CSS styles
- In-Built Animation Support
Usage
app.module.ts
import { PopupModule } from 'nitro-popup';
@NgModule({
declarations: [
// ...
],
imports: [
PopupModule
// ...
]
})
some.component.ts
import { PopupService } from 'nitro-popup';
// ...
export class SomeComponent {
constructor(
public popupService: PopupService
) {
}
triggerPopupOpen():void {
openPopup({
event: new Event('open'),
template: popupRef
});
}
openPopup(opt: any): void {
this.popupService.open(opt);
}
closePopup(opt: any): void {
this.popupService.close(opt);
}
}
some.component.html
- SIMPLE USE Compact
<button (click)="openPopup({
event: $event,
template: popupRef
})" class="btn">OPEN POPUP</button>
<nitro-popup #popupRef [config]="{
width: '600px',
height: '600px',
id: 'popupYourID',
contentLayout: popupContentLayout
}">
</nitro-popup>
<ng-template #popupContentLayout>
<ng-container *ngTemplateOutlet="profileImage"></ng-container>
</ng-template>
<ng-template #popupHeaderLayout>
<span class="title">Title</span>
<button class="btn close" (click)="closePopup($event)">x</button>
</ng-template>
<ng-template #popupFooterLayout>
Footer
</ng-template>
<ng-template #popupSideLayout>
<nav>
<ul>
<li>
<button>Menu 1</button>
</li>
<li>
<button>Menu 2</button>
</li>
</ul>
</nav>
</ng-template>
some.component.html
- SIMPLE USE with Animations and all Templates
<button (click)="openPopup({
event: $event,
template: popupRef
})" class="btn">OPEN POPUP</button>
<nitro-popup #popupRef [config]="{
width: '600px',
height: '600px',
id: 'popupDemo',
class: 'popupYourStyleClass or Classes',
animateIn: 'zoomIn',
animateOut: 'zoomOut'
sideLayout: popupSideLayout,
headerLayout: popupHeaderLayout,
footerLayout: popupFooterLayout,
contentLayout: popupContentLayout
}">
</nitro-popup>
<ng-template #popupContentLayout>
Popup Contents
</ng-template>
<ng-template #popupHeaderLayout>
<span class="title">Title</span>
<button class="btn close" (click)="closePopup($event)">x</button>
</ng-template>
<ng-template #popupFooterLayout>
Footer
</ng-template>
<ng-template #popupSideLayout>
<nav class="menu">
<ul>
<li>
<button>Menu 1</button>
</li>
<li>
<button>Menu 2</button>
</li>
</ul>
</nav>
</ng-template>
some.component.html
- Growing from a target element
<button #btnRef (click)="openPopup({
event: $event,
template: popupRef
})" class="btn">OPEN POPUP</button>
<nitro-popup #popupRef [config]="{
delay: 500,
origin: btnRef,
width: '100%',
height: '100%',
id: 'popupDemo',
class: 'popupStyle',
animateIn: 'pulse',
animateOut: 'zoomOut',
css: {
'max-width': '100vw',
'max-height': '100vh'
},
contentLayout: popupContentLayout
}">
</nitro-popup>
<ng-template #popupContentLayout>
<ng-container *ngTemplateOutlet="profileImage"></ng-container>
</ng-template>
<!-- <ng-template #popupHeaderLayout>
<span class="title">Title</span>
<button class="btn close" (click)="closePopup($event)">x</button>
</ng-template>
<ng-template #popupFooterLayout>
Footer
</ng-template>
<ng-template #popupSideLayout>
<nav>
<ul>
<li>
<button>Menu 1</button>
</li>
<li>
<button>Menu 2</button>
</li>
</ul>
</nav>
</ng-template> -->
How to override context menu and open a custom Menu
<div class="customContextMenu" (contextmenu)="openPopup({
event: $event,
template: menu
})" style="width: 100%; height: 100%; top:0; left:0; position: fixed;background: rgba(0,0,0,0.2)">
Right Button Click this area to get the CUSTOM MENU
</div>
<nitro-popup #menu [config]="{
width: 'auto',
height: 'auto',
id: 'popupMenu',
class: 'popupMenu',
contentLayout: menuLayout
}">
<ng-template #menuLayout>
<a href="javascript:;">Menu 1</a>
<a href="javascript:;">Menu 2</a>
<a href="javascript:;">Menu 3</a>
<a href="javascript:;">Menu 4</a>
</ng-template>
</nitro-popup>
API:
Name | Type | Default | Description |
---|---|---|---|
id |
String |
"" |
IDThis will set an ID for the popup template (Keep it unique) Eg.: <nitro-popup [config]="{id: 'popupName'...}"></nitro-popup> Accepted Values: <any_string> ID String will also be added as a class for the popup also. |
width & height
|
String |
100% |
Width and height of popupSet width and height of the popup. The width can be of % , px or auto values as a stringEg.: <nitro-popup [config]="{width: '600px', height: 'auto'}"></nitro-popup> |
css |
JSON |
"" |
Add custom CSSCustom css will be applied as inline style to the Popup Eg.: <nitro-popup [config]="{ css: {'max-width': '100vw','max-height': '100vh'}}"></nitro-popup> |
animateIn |
String |
"" |
Class for Animate InAnimateIn Class will be applied to the Popup at opening event Eg.: <nitro-popup [config]="{ animateIn: 'zoomIn'}"></nitro-popup> |
animateOut |
String |
"" |
Class for Animate OutAnimateOut Class will be applied to the Popup at opening event Eg.: <nitro-popup [config]="{ animateOut: 'zoomOut' }"></nitro-popup> |
level |
Number |
0 |
Updating the Layer OrderThe default z-index of Popup is 1050 and the level value will be added with 1050 .NB: You can also decrease the z-index value by giving negative value as levelEg.: <nitro-popup [config]="{ level: '-1049' }"></nitro-popup> Will set the popup layer z-index: 1 . |
overlay |
String / boolean
|
true |
Various Overlay TypesToggle Overlay Show/Hide or blocks/allow clicks outside the popup Accepted Values are true , false , transparent , none , transparent_none Eg.: <nitro-popup [config]="{overlay: 'transparent'}"></nitro-popup> |
headerLayout |
TemplateRef |
null |
Header TemplateHTML Template for header Eg.: <nitro-popup [config]="{headerLayout: headerTemplateElementRef}"></nitro-popup> |
footerLayout |
TemplateRef |
null |
Footer TemplateHTML Template for footer Eg.: <nitro-popup [config]="{footerLayout: footerTemplateElementRef}"></nitro-popup> |
contentLayout |
TemplateRef |
null |
Content TemplateHTML Template for content Eg.: <nitro-popup [config]="{contentLayout: contentTemplateElementRef}"></nitro-popup> |
sideLayout |
TemplateRef |
null |
Left Side TemplateHTML Template for side Eg.: <nitro-popup [config]="{sideLayout: sideTemplateElementRef}"></nitro-popup> |
customLayout |
TemplateRef |
null |
custom Layout TemplateCustom HTML Template for Popup Eg.: <nitro-popup [config]="{customLayout: sideTemplateElementRef}"></nitro-popup> |
This library was generated with Angular CLI version 17.1.3
.