JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Vue Popper

    :whale: VueJS popover component based popper.js
    Filed under 

    • 🔾34%Overall
    • 241
    • 3.6 days
    • 🕩59
    • 👥12

    vue-popperjs

    Greenkeeper badge VueJS popover component based on popper.js

    Example

    jsFiddle

    Install

    CDN

    Recommended: https://unpkg.com/vue-popperjs, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at https://unpkg.com/vue-popperjs/

    NPM

    npm install vue-popperjs --save
    

    Yarn

    yarn add vue-popperjs
    

    Bower

    bower install vue-popperjs --save
    

    Development Setup

    # install dependencies
    npm install
    
    # build dist files
    npm run build
    

    Usage

    VueJS single file (ECMAScript 2015)

    <template>
      <popper
        trigger="click"
        :options="{
          placement: 'top',
          modifiers: { offset: { offset: '0,10px' } }
        }">
        <div class="popper">
          Popper Content
        </div>
    
        <button slot="reference">
          Reference Element
        </button>
      </popper>
    </template>
    
    <script>
      import Popper from 'vue-popperjs';
      import 'vue-popperjs/dist/vue-popper.css';
    
      export default {
        components: {
          'popper': Popper
        },
      }
    </script>
    

    Browser (ES5)

    <link rel="stylesheet" href="vue-popper.css">
    <script type="text/javascript" src="popper.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="vue-popper.js"></script>
    
    <div id="app">
      <popper
        trigger="click"
        :options="{
          placement: 'top',
          modifiers: { offset: { offset: '0,10px' } }
        }">
        <div class="popper">
          Popper Content
        </div>
    
        <button slot="reference">
          Reference Element
        </button>
      </popper>
    </div>
    
    <script type="text/javascript">
      new Vue({
        el: '#app',
        components: {
          'popper': VuePopper
        }
      });
    </script>
    

    Props

    Props Type Default Description
    disabled Boolean false
    delay-on-mouse-over Number 10 Delay in ms before showing popper during a mouse over
    delay-on-mouse-out Number 10 Delay in ms before hiding popper during a mouse out
    append-to-body Boolean false
    visible-arrow Boolean true
    force-show Boolean false
    trigger String hover Optional value: hover or click
    content String null
    enter-active-class String null
    leave-active-class String null
    boundaries-selector String null
    transition String empty
    options Object { placement: 'bottom', gpuAcceleration: false } popper.js options
    data-value Any null data of popper
    stop-propagation Boolean false
    prevent-default Boolean false

    Events

    Name Params Description
    created context[Object] Created popper component
    show Show popover
    hide Hide popover
    document-click

    Other my Vue JS plugins

    Project Status Description
    vue-ls npm Vue plugin for work with local storage, session storage and memory storage from Vue context
    vue-gallery npm Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers

    License

    FOSSA Status

    MIT © Igor Ognichenko

    Show All