popper-vue
neatly and snugly implements Popper.js into a simple <Popper>
component that you can use to wrap it's children inside of a popper around an anchor element in your Vue applications.
$ npm install popper-vue popper.js
Please note that
popper-vue
assumes that you already have Vue.js installed in your application. If you not have Vue installed. Install it by runningnpm install vue --save
Popper
registrationIn your main.js
:
import { Popper } from 'popper-vue'
import 'popper-vue/dist/popper-vue.css'
Vue.component('Popper', Popper)
Popper
importIn your templates:
<template>
<div id="app">
<button ref="anchorEl" @click="showPopper">Toggle portal</button>
<Popper
:is-open="show"
:anchor-el="$refs.anchorEl"
:on-close="hidePopper"
>
<aside id="popper-content">
I am a Happy Popper 😀
</aside>
</Popper>
</div>
</template>
<script lang="js">
import { Popper } from 'popper-vue'
import 'popper-vue/dist/popper-vue.css'
export default {
name: 'App',
components: {
Popper
},
data () {
return {
show: false
}
},
methods: {
showPopper () {
this.show = !this.show
},
hidePopper () {
this.show = false
}
}
}
</script>
popper-vue
provides a few components that allow to render custom popper components.
✅ - Completed! ⚠️ - WIP
Props | Description | Values | Default |
---|---|---|---|
✅anchorEl | Anchor element around which popper is positioned | HTMLElement |
N/A |
✅ placement | Default position where popperEl should be placed when Popper is open |
top , right , bottom , left
|
bottom |
✅ modifiers | Modifier options for popper.js . See popper.js docs for more information |
Object |
{} |
✅ isOpen | Determines whether the Popper is open or not | Boolean |
false |
✅ onClose | Handler function to be called when the popper is to be closed | Function |
null |
✅closeOnClickAway | Determines whether popper should close when other elements are clicked | Boolean |
true |
⚠️ usePortal | Determines whether popper should mount popperEl in portal before positioning it around anchor. |
Boolean |
false |
✅ hasArrow | Determines whether popper should possess arrow when shown | Boolean |
true |
Events | Description | Payload |
---|---|---|
✅ popper:create
|
Emitted when popperEl is open and has been mounted by popper.js
|
{ el: popperEl<HTMLElement> } |
✅ popper:update
|
Emitted when Popper.js instance undergoes an update | { el: HTMLElement } |
✅ popper:close
|
Emitted when popperEl is closed and has been unmounted by popper.js
|
{} |
popper:close
event is sometimes emitted twice when the popper is being closed when the closeOnClickAway
props is truthy. Currently there are no implemented workarounds for this yet, so while using this component make sure to be careful of it. It's also worth pointing out that this may not be that big of a problem for most consumer use cases@popperjs/core
supportpopper-vue
in component libraryHere's our contribution guide.
If you like this project, please consider supporting it by buying my a coffee!
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!