1.0.8 • Published 3 years ago
ngx-cxl-popover v1.0.8
NgxCxlPopover
The best popover package because it's easy to use and customizable .
Installation
You can use either the npm command-line tool to install packages.
NPM
npm i ngx-cxl-popover
Usage ⁉
- import
NgxCxlPopoverModulemodule
@NgModule({
imports: [
/* .... */
NgxCxlPopoverModule
/* .... */
],
})- add directive
ngxCxlPopoveron the element. - write your awesome title
popoverTitle. - write your awesome content
popoverContent.
<h1 ngxCxlPopover popoverTitle="Hello" popoverContent="👋">Hello</h1>if you want use customized templates for the title and content then let's go to the next level 👍
Advanced
Custom Templates
<h1
ngxCxlPopover
popoverTitle="Hello"
popoverContent="👋"
[titleTemplate]="titleTemplate"
[contentTemplate]="contentTemplate"
>
Hello
</h1>
<!-- Custom Templates -->
<ng-template #titleTemplate>
<img src="..." alt="..." />
<p>...</p>
</ng-template>
<ng-template #contentTemplate>
<img src="..." alt="..." />
<p>...</p>
</ng-template>
<!-- -->Options
| Attribute | Type | Description | Default |
|---|---|---|---|
enableScroll | boolean | enable scrolling into popover content | false |
scrollSpeed | number | the speed of scrolling between 10 and 100 | 10 |
width | number | set popover fixed width | 200px |
height | number | set popover fixed height | 300px |
popoverTitle | string | write the title phase | null |
popoverContent | string | write the content phase | null |
titleTemplate | TemplateRef | reference to the custom title template | null |
contentTemplate | TemplateRef | reference to the custom content template | null |
placementHorizontal | number | force popover to show in specific direction and has options 'right' , 'left' , null | null |
placementVertical | number | force popover to show in specific direction and has options 'top' , 'bottom' , null; | null |
animation | boolean | enable animation | true |
animationDelay | number | change animation time in milliseconds | 100 |
Customize Style
.ngx-cxl-popover-container {
}
.ngx-cxl-popover-container .ngx-cxl-popover-title {
}
.ngx-cxl-popover-container .ngx-cxl-popover-content {
}Simplest and Easiest 👌💖👏
Contribution
I welcome you to fork and add more features into it. If you have any bugs or feature request, please create an issue at github repository.
License
MIT