trendingtechnology / vue-popper-component

Popper.js directive for Vue.js

vue-popper-component

Simple Vue.js component for Popper.js plugin.

Demos:

https://antongorodezkiy.github.io/vue-popper-component/

Dependencies:

• Vue 1.*
• Popper.js 1.*

Usage:

const
	Vue = require('vue'),
  VuePopper = require('vue-popper-component');
	
new Vue({
  el: '#app',
  
  components: {
    'popper': VuePopper
  },
  
  data: {
    showPopperParentVar: true
  }
});

<popper
	:show-popper.sync="showPopperParentVar"
	content="Some plain text message here"
	placement="right"
	close-button="Close me!">
    
    <span @click.prevent="showPopperParentVar = !showPopperParentVar">
      ?
    </span>
    
</popper>

Usage with html in slots:

<popper
  :show-popper.sync="showPopperParentVar"
  content="Lorem ipsum dolor"
  placement="top"
  close-button="1">
  
    <div slot="close-button">
      <i class="glyphicon glyphicon-remove"></i>
    </div>
    
    <div slot="content">
      <h2><i class="glyphicon glyphicon-star"></i> <b>us</b> <i>on</i> <u>github</u>!</h2>
      <a @click.prevent="showPopperParentVar = false" href="#">Close this popover from the content!</a>
    </div>
  
    <button class="btn btn-default" @click.prevent="showPopperParentVar = !showPopperParentVar">
      Click to open popover on the bottom
    </button>
</popper>