README
@rovit/popper
The @rovit/popper
utility is based on Popper.js 2.x and comes with a usePopper
utility that's meant to be used with the Vue Composition API.
Here's the basic example from Storybook:
<script>
import { ref } from 'vue'
import { usePopper } from './use-popper'
export default {
name: 'Popper',
props: {},
setup(props, context) {
const theButton = ref(null)
const thePopup = ref(null)
const popper = usePopper(theButton, thePopup)
return {
theButton,
thePopup,
popper
}
}
}
</script>
<template>
<div class="flex flex-row items-center justify-center h-64">
<button
ref="theButton"
type="button"
class="px-2 py-1 text-white bg-purple-700 rounded"
@click="popper.toggle"
>
Click me to toggle the popper
</button>
<div v-show="popper.isVisible" ref="thePopup" class="w-64">
<div class="p-3 text-center bg-gray-400 border-gray-500 rounded">
This is the popper
</div>
</div>
</div>
</template>
Setup
To create a popper, make sure you've accomplished all of the following:
- Install the module and import it into your component.
- Create an element with a
ref
that represents the button or item that will trigger the popper to open. It's usually simplest to usecamelCase
style naming, which simplifies the next step. (underscored values would work, too) - Create an element with a
ref
that represents the popup menu that will open. - In your component's setup function, create two
ref
variables named the same as theref
you put on each of the above elements. - Pass the two variables into the
usePopper
utility.const popper = usePopper(theButton, thePopup)
- Return the
popper
and the two ref variables at the end of thesetup
function. - Attach event handlers to
open
,close
, ortoggle
the popper.
API
The @rovit/popper
accepts the exact same arguments as the createPopper
utility from @popperjs/core
. See the documentation, here: https://popper.js.org/docs/v2/constructors/. Below is a summary of the options, since they're kind of scattered all over the Popper.js documentation site.