vue-popper-lite
A popover component based on popper-lite for Vue 3 support typescript
Example
Using Vue Popper Lite from Vue SFC
Vue SFC Playground
Using Vue Popper Lite from CDN
Vue from CDN
Install
NPM
npm install vue-popper-lite
Yarn
yarn add vue-popper-lite
PNPM
pnpm add vue-popper-lite
CDN
Recommended: https://unpkg.com/vue-popper-lite, 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-popper-lite/
Usage
Vue environment
<!-- If your content is only a simple string, you can use the content prop -->
<template>
<v-popper content="This is the Popper content">
<button slot="reference">
Reference Element
</button>
</v-popper>
</template>
<!-- If your content is more complex, you can use the content slot -->
<template>
<v-popper>
<div>This is the Popper content</div>
<template #reference>
<button>Trigger element</button>
</template>
</v-popper>
</template>
<script>
import { defineComponent } from "vue";
import { Popper } from "vue-popper-lite";
import "vue-popper-lite/style.css";
export default defineComponent({
components: {
'VPopper': Popper,
},
});
</script>
Props
| Name |
Type |
Default |
Description |
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
|
placement |
String |
bottom |
Preferred placement of the Popper |
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 |
disabled |
Boolean |
false |
Disables the Popper. If it was already open, it will be closed. |
content |
String |
null |
If your content is just a simple string, you can pass it as a prop |
transition |
String |
empty |
Custom transition class |
enter-active-class |
String |
null |
Custom transition class enter |
leave-active-class |
String |
null |
Custom transition class leave |
force-show |
Boolean |
false |
Force show popper |
append-to-body |
Boolean |
false |
Append content to body |
visible-arrow |
Boolean |
true |
Visible an arrow on the Popper |
arrow-padding |
Number |
0 |
Stop arrow from reaching the edge of the Popper (in pixels) |
enable-flip |
Boolean |
true |
Popper into place, it will not flip dynamically when it runs out of space if this is set to false |
offset-kidding |
Number |
0 |
Offset in pixels along the trigger element |
offset-distance |
Number |
8 |
Offset in pixels away from the trigger element |
stop-propagation |
Boolean |
false |
Stop propagation event click |
prevent-default |
Boolean |
false |
Prevent default event click |
strategy |
String |
absolute |
Describes the positioning strategy to use. If your reference element is in a fixed container, use the fixed strategy |
content-class |
String |
empty |
Class name for content element |
Events
| Name |
Description |
created |
Created popper component |
show |
Show popover |
hide |
Hide popover |
document-click |
|
Slots
| Name |
Description |
default |
For the Popper content |
reference |
For Trigger the Popper |
CSS variables
Popper also uses a list of predefined CSS variables. You can overwrite these variables to suit your needs.
| CSS variable |
Example value |
--popper-background |
#333333 |
--popper-color |
#ffffff |
--popper-padding |
8px |
--popper-radius |
4px |
--popper-arrow-width |
8px |
--popper-arrow-height |
8px |
Development Setup
# install dependencies
pnpm install
# build dist files
pnpm build
# build dist files and types
pnpm prepublishOnly