ngx-popperjs v17.0.0
ngx-popperjs
ngx-popperjs is an angular wrapper for the Popper.js library.
Note that I also updated everything to use Popper 2 (v 2.4.4 at this time)
The goal of this library is to take Mr Frankel's ngx-popper and update the compatibility up to Angular 10 (in first instance Angular 8). Since his library is compatible with Angular 7 and downwards, this will start with Angular 8. If you need to work with an older version of Angular (5 to 7), please refer to Mr Frankel's ngx-popper.
Installation
node and npm are required to run this package.
Use npm/yarn to install the package:
$ npm install @popperjs/core ngx-popperjs --save
Or
$ yarn add @popperjs/core --save $ yarn add ngx-popperjs --save
You simply add into your module
NgxPopperjsModule
:import {NgxPopperModule} from 'ngx-popperjs'; @NgModule({ // ... imports: [ // ... NgxPopperjsModule ] })
SystemJS
System.config({
paths: {
'npm:': 'https://unpkg.com/' // or your local folder
}
// map tells the System loader where to look for things
map: {
... ,
"@popperjs/core": "npm:@popperjs/core@2.4.4/dist/umd/popper.js",
"ngx-popperjs": "npm:ngx-popperjs@8.0.0/bundles/ngx-popperjs.umd.js
}
});
Optionally you can include in your styles.css
/ styles.css
one of the prebuilt themes:
@import ~ngx-popperjs/css/theme-dark.css
@import ~ngx-popperjs/css/theme-white.css
@import ~ngx-popperjs/scss/theme-dark
@import ~ngx-popperjs/scss/theme-white
or easily create your own theme using the @mixin
@import ~ngx-popperjs/scss/theme
body {
@include ngx-popperjs-theme($background-color, $text-color, $max-width, $z-index)
}
Add to view:
<popper-content #popper1Content> <p class="bold">Popper on bottom</p> </popper-content> <div [popper]="popper1Content" [popperShowOnStart]="true" [popperTrigger]="'click'" [popperHideOnClickOutside]="true" [popperHideOnScroll]="true" [popperPlacement]="'bottom'"> <p class="bold">Hey!</p> <p class="thin">Choose where to put your popper!</p> </div>
As text:
<div popper="As text" [popperTrigger]="'hover'" [popperPlacement]="'bottom'" (popperOnShown)="onShown($event)"> <p class="bold">Pop</p> <p class="thin">on the bottom</p> </div>
<div popper="{{someTextProperty}}" [popperTrigger]="'hover'" [popperPlacement]="'bottom'" [popperStyles]="{'background-color: 'blue''}", (popperOnShown)="onShown($event)"> <p class="bold">Pop</p> <p class="thin">on the bottom</p> </div>
Position fixed, breaking overflow:
<div popper="As text" [popperTrigger]="'hover'" [popperPlacement]="'bottom'" [popperPositionFixed]="true" (popperOnShown)="onShown($event)"> </div>
Specific target:
<div class="example"> <div #popperTargetElement></div> <div popper="As text" popperTrigger="hover" popperPlacement="bottom" [popperTarget]="popperTargetElement.nativeElement" (popperOnShown)="onShown($event)"> </div>
hide/show programmatically:
<div [popper]="tooltipcontent" popperTrigger="hover" popperPlacement="bottom" [popperApplyClass]="'popperSpecialStyle'"> <p class="bold">Pop</p> <p class="thin">on the bottom</p> </div> <popper-content #tooltipcontent> <div> <p>This is a tooltip with text</p> <span (click)="tooltipcontent.hide()">Close</span> </div> </popper-content>
Attributes map:
Option Type Default Description popperDisableAnimation boolean false Disable the default animation on show/hide popperDisableStyle boolean false Disable the default styling popperDisabled boolean false Disable the popper, ignore all events popperDelay number 0 Delay time until popper it shown popperTimeout number 0 Set delay before the popper is hidden popperTimeoutAfterShow number 0 Set a time on which the popper will be hidden after it is shown popperPlacement Placement(string) auto The placement to show the popper relative to the reference element popperTarget HtmlElement auto Specify a different reference element other the the one hosting the directive popperBoundaries string(selector) undefined Specify a selector to serve as the boundaries of the element popperShowOnStart boolean false Popper default to show popperTrigger Trigger(string) hover Trigger/Event on which to show/hide the popper popperPositionFixed boolean false Set the popper element to use position: fixed popperAppendTo string undefined append The popper-content element to a given selector, if multiple will apply to first popperPreventOverflow boolean undefined Prevent the popper from being positioned outside the boundary popperHideOnClickOutside boolean true Popper will hide on a click outside popperHideOnScroll boolean false Popper will hide on scroll popperHideOnMouseLeave boolean false Popper will hide on mouse leave popperModifiers popperModifier undefined popper.js custom modifiers hock popperApplyClass string undefined list of comma separated class to apply on ngpx__container popperStyles Object undefined Apply the styles object, aligned with ngStyles popperApplyArrowClass string undefined list of comma separated class to apply on ngpx__arrow popperOnShown EventEmitter<> $event Event handler when popper is shown popperOnHidden EventEmitter<> $event Event handler when popper is hidden popperOnUpdate EventEmitter<> $event Event handler when popper is updated popperAriaDescribeBy string undefined Define value for aria-describeby attribute popperAriaRole string popper Define value for aria-role attribute
Override defaults:
ngx-popperjs comes with a few default properties you can override in default to effect all instances These are overridden by any child attributes.
NgModule({
imports: [
BrowserModule,
FormsModule,
NgxPopperjsModule.forRoot({placement: 'bottom'})],
declarations: [AppComponent],
providers: [],
bootstrap: [AppComponent]
});
Options | Type | Default |
---|---|---|
showDelay | number | 0 |
disableAnimation | boolean | false |
disableDefaultStyling | boolean | false |
placement | Placement(string) | auto |
boundariesElement | string(selector) | undefined |
trigger | Trigger(string) | hover |
popperModifiers | popperModifier | undefined |
positionFixed | boolean | false |
hideOnClickOutside | boolean | true |
hideOnMouseLeave | boolean | false |
hideOnScroll | boolean | false |
applyClass | string | undefined |
styles | Object | undefined |
applyArrowClass | string | undefined |
ariaDescribeBy | string | undefined |
ariaRole | string | undefined |
appendTo | string | undefined |
preventOverflow | boolean | undefined |
popperPlacement:
| 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'bottom-start' | 'left-start' | 'right-start' | 'top-end' | 'bottom-end' | 'left-end' | 'right-end' | 'auto' | 'auto-start' | 'auto-end' | Function
popperTrigger:
| 'click' | 'mousedown' | 'hover' | 'none'
Demo
Demo
Contribute
Hell ya!!!
$ npm install
$ npm run start //run example
Thanks to
MrFrankel for setting up ngx-popper and maintaining till v 7.0.0.
1 month ago
1 month ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
12 months ago
11 months ago
9 months ago
9 months ago
9 months ago
11 months ago
11 months ago
9 months ago
9 months ago
9 months ago
9 months ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago