ngx-popper
ngx-popper is an angular wrapper for the Popper.js library.
Installation
node and npm are required to run this package.
- Use npm/yarn to install the package:
$ npm install ngx-popper --save
Or
$ yarn add ngx-popper --save
- You simply add into your module
NgxPopperModule
:
;
SystemJS
System.config({
paths: {
// paths serve as alias
'npm:': 'libs/'
},
// map tells the System loader where to look for things
map: {
... ,
'ngx-popper': 'npm:ngx-popper',
'popper-directive.js': 'npm:ngx-popper',
'popper.module': 'npm:ngx-popper',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
... ,
'ngx-popper': {
main: 'index.js',
defaultExtension: 'js'
},
'popper.js': {
main: 'popper-directive.js',
defaultExtension: 'js'
},
'popper.module': {
main: './popper.module.js',
defaultExtension: 'js'
}
}
});
- Add to view:
<div [popper]="popper1Content" [popperShowOnStart]="true" [popperTrigger]="'click'" [popperPlacement]="'bottom'"> <p class="bold">Hey!</p> <p class="thin">Choose where to put your popper!</p> </div> <popper-content #popper1Content> <p class="bold">Popper on bottom</p> </popper-content>
- 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>
- 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" (popperOnShown)="onShown($event)"> </div>
- hide/show programmatically:
<div [popper]="tooltipcontent" [popperTrigger]="'hover'" [popperPlacement]="'bottom'"> <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</div> </div> </popper-content>
-
Attributes map:
Option Type Default popperDisableAnimation boolean false popperDisableStyle boolean false popperDisabled boolean false popperDelay number 0 popperTimeout number 0 popperTimeoutAfterShow number 0 popperPlacement Placement(string) auto popperTarget HtmlElement auto popperBoundaries string(selector) undefined popperShowOnStart number 0 popperTrigger Trigger(string) hover popperPositionFixed boolean false popperHideOnClickOutside boolean true popperHideOnScroll boolean false popperForceDetection boolean false popperModifiers popperModifier undefined popperOnShown EventEmitter $event popperOnHidden EventEmitter $event -
Override defaults:
Ngx-popper 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, NgxPopperModule.forRoot({placement: 'bottom'})], declarations: [AppComponent], providers: [], bootstrap: [AppComponent] })
Options | Type | Default |
---|---|---|
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 |
hideOnScroll | boolean | false |
- popperPlacement:
| 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'bottom-start' | 'left-start' | 'right-start' | 'top-end' | 'bottom-end' | 'left-end' | 'right-end' | 'auto' | 'auto-top' | 'auto-bottom' | 'auto-left' | 'auto-right' | Function
- popperTrigger:
| 'click' | 'mousedown' | 'hover' | 'none'
Demo
Contribute
Hell ya!!!
$ yarn install $ yarn run build $ yarn run dev