antongorodezkiy/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>

vue-popper-component's Issues

Upgrade plans to Popper v1?

Hi, thank you for the great component!

I was wondering if you have any plans to upgrade this component to Popper v1.

In few days we'll release the first stable beta, but the API of the latest alpha is already stable.

Thank you.

No mention of installation in readme

small thing but could be worth just adding to install you need to run npm install --save vue-popper-component on the readme. Thanks!

Rename `demo` to `docs` and enable gh-pages

Hi, you could rename the demo folder to docs and i the repository settings enable the gh-pages served by docs. Doing so, visiting https://antongorodezkiy.github.io/vue-popper-component will open the demo page.