6.2.1 • Published 5 years ago

ngx-smart-popper v6.2.1

Weekly downloads
121
License
MIT
Repository
github
Last release
5 years ago

ngx-smart-popper

npm npm MIT licensed Greenkeeper badge Build Status

ngx-smart-popper is an angular wrapper for the Popper.js library.

Changes

As of version 6.0.0 popper content runs in onPush change detection strategy, therefore forceChangeDetection is no longer necessary and is removed

As of version 4.0.0 ngx-smart-popper now use innerHTML binding for string popper i.e:

<div popper="some text"></div>

This should make no difference but you should be aware.

As of version 4.0.0 popper.model is now popper-model, due to some angular-cli issues, if you are referencing this please update your references.

Installation

node and npm are required to run this package.

  1. Use npm/yarn to install the package:

    $ npm install popper.js --save
    $ npm install ngx-smart-popper --save 

    Or

     $ yarn add popper.js --save
     $ yarn add ngx-smart-popper --save 
  2. You simply add into your module NgxPopperModule:

    import {NgxPopperModule} from 'ngx-smart-popper';
    
    @NgModule({
     // ...
     imports: [
       // ...
       NgxPopperModule
     ]
    })

SystemJS

    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'libs/'
        },
        // map tells the System loader where to look for things
        map: {
            ... ,
            'ngx-smart-popper': 'npm:ngx-smart-popper',
            'popper-directive.js': 'npm:ngx-smart-popper',
            'popper.module': 'npm:ngx-smart-popper',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            ... ,
            'ngx-smart-popper': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            'popper.js': {
                main: 'popper-directive.js',
                defaultExtension: 'js'
            },
            'popper.module': {
                main: './popper.module.js',
                defaultExtension: 'js'
            }
        }
    });
  1. Add to view:

     <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>
         <popper-content #popper1Content>
           <p class="bold">Popper on bottom</p>
         </popper-content>
  2. 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>
  3. Position fixed, breaking overflow:

         <div [popper]="'As text'"
              [popperTrigger]="'hover'"
              [popperPlacement]="'bottom'"
              [popperPositionFixed]="true"
              (popperOnShown)="onShown($event)">
         </div>
  4. Specific target:

    <div class="example">
         <div #popperTargetElement></div>
         <div [popper]="'As text'"
              [popperTrigger]="'hover'"
              [popperPlacement]="'bottom'"
              [popperTarget]="popperTargetElement.nativeElement"
              (popperOnShown)="onShown($event)">
         </div>
  5. 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>
  6. Attributes map:

    OptionTypeDefaultDescription
    popperDisableAnimationbooleanfalseDisable the default animation on show/hide
    popperDisableStylebooleanfalseDisable the default styling
    popperDisabledbooleanfalseDisable the popper, ignore all events
    popperDelaynumber0Delay time until popper it shown
    popperTimeoutnumber0Set delay before the popper is hidden
    popperTimeoutAfterShownumber0Set a time on which the popper will be hidden after it is shown
    popperPlacementPlacement(string)autoThe placement to show the popper relative to the reference element
    popperTargetHtmlElementautoSpecify a different reference element other the the one hosting the directive
    popperBoundariesstring(selector)undefinedSpecify a selector to serve as the boundaries of the element
    popperShowOnStartbooleanfalsePopper default to show
    popperTriggerTrigger(string)hoverTrigger/Event on which to show/hide the popper
    popperPositionFixedbooleanfalseSet the popper element to use position: fixed
    popperAppendTostringundefinedappend The popper-content element to a given selector, if multiple will apply to first
    popperPreventOverflowbooleanundefinedPrevent the popper from being positioned outside the boundary
    popperHideOnClickOutsidebooleantruePopper will hide on a click outside
    popperHideOnScrollbooleanfalsePopper will hide on scroll
    popperHideOnMouseLeavebooleanfalsePopper will hide on mouse leave
    popperModifierspopperModifierundefinedpopper.js custom modifiers hock
    popperApplyClassstringundefinedlist of comma separated class to apply on ngpx__container
    popperStylesObjectundefinedApply the styles object, aligned with ngStyles
    popperApplyArrowClassstringundefinedlist of comma separated class to apply on ngpx__arrow
    popperOnShownEventEmitter<>$eventEvent handler when popper is shown
    popperOnHiddenEventEmitter<>$eventEvent handler when popper is hidden
    popperOnUpdateEventEmitter<>$eventEvent handler when popper is updated
    popperAriaDescribeBystringundefinedDefine value for aria-describeby attribute
    popperAriaRolestringpopperDefine value for aria-role attribute
  1. Override defaults:

    ngx-smart-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]

})
OptionsTypeDefault
showDelay              number          0      
disableAnimationbooleanfalse
disableDefaultStylingbooleanfalse
placementPlacement(string)auto
boundariesElementstring(selector)undefined
triggerTrigger(string)hover
popperModifierspopperModifierundefined
positionFixedbooleanfalse
hideOnClickOutsidebooleantrue
hideOnMouseLeavebooleanfalse
hideOnScrollbooleanfalse
applyClassstringundefined
stylesObjectundefined
applyArrowClassstringundefined
ariaDescribeBystringundefined
ariaRolestringundefined
appendTostringundefined
preventOverflowbooleanundefined
  1. 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

  2. popperTrigger:

    | 'click' | 'mousedown' | 'hover' | 'none'

Demo

Demo

Contribute

Hell ya!!!

  $ npm install
  $ npm run build
  $ npm run dev  //run example
  $ npm run start_test  //run tests
6.2.1

5 years ago

6.2.0

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago