- ×
:whale: VueJS popover component based popper.js
Filed under user interfaceShow Allvue-popperjs
VueJS popover component based on popper.js
Example
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 Vue plugin for work with local storage, session storage and memory storage from Vue context vue-gallery 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
MIT © Igor Ognichenko