JavaScripting

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


  • ×

    Vue Popper

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

    • 🔾38%Overall
    • 317
    • 6.5 days
    • 🕩74
    • 👥18

    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="clickToOpen"
        :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="clickToOpen"
        :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 - hover to open popper content
    • clickToOpen - every click on the popper triggers open, only clicking outside of the popper closes it
    • clickToToggle - click on the popper toggles it's visibility
    • click (deprecated - same as clickToToggle)
    • focus - opens popper on focus event, closes on blur.
    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
    root-class String empty Class name for root element

    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

    Contributors

    Code Contributors

    This project exists thanks to all the people who contribute. [Contribute].

    Financial Contributors

    Become a financial contributor and help us sustain our community. [Contribute]

    Individuals

    Organizations

    Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

    License

    FOSSA Status

    MIT © Igor Ognichenko

    Show All