vue3-popper-contrib
v1.4.8
Published
A Vue 3 popper component. Uses PopperJS v2.
Downloads
9
Maintainers
Readme
vue3-popper
A popover component for Vue 3
Documentation
Check out the documentation
Install
NPM
npm install vue3-popper
Yarn
yarn add vue3-popper
Usage
Vue environment
<!-- If your content is only a simple string, you can use the content prop: -->
<template>
<Popper content="This is the Popper content">
<button>Trigger element</button>
</Popper>
</template>
<!-- If your content is more complex, you can use the content slot: -->
<template>
<Popper>
<button>Trigger element</button>
<template #content>
<div>This is the Popper content</div>
</template>
</Popper>
</template>
<script>
import { defineComponent } from "vue";
import Popper from "vue3-popper";
export default defineComponent({
components: {
Popper,
},
});
</script>
Props
| Name | Default | Description |
| ------------------ | -------- | ----------------------------------------------------------------------------------------------------------- |
| placement
| bottom
| Preferred placement of the Popper |
| disableClickAway
| false
| Disables automatically closing the Popper when the user clicks away from it |
| offsetSkid
| 0
| Offset in pixels along the trigger element |
| offsetDistance
| 12
| Offset in pixels away from the trigger element |
| hover
| false
| Trigger the Popper on hover |
| arrow
| false
| Display an arrow on the Popper |
| arrowPadding
| 0
| Stop arrow from reaching the edge of the Popper (in pixels) |
| disabled
| false
| Disables the Popper. If it was already open, it will be closed. |
| openDelay
| 0
| Open the Popper after a delay (ms) |
| closeDelay
| 0
| Close the Popper after a delay (ms) |
| interactive
| true
| If the Popper should be interactive, it will close when clicked/hovered if false |
| content
| null
| If your content is just a simple string, you can pass it as a prop |
| show
| null
| Control the Popper manually, other events (click, hover) are ignored if this is set to true/false
|
| zIndex
| 9999
| The z-index of the Popper |
| locked
| false
| Lock the Popper into place, it will not flip dynamically when it runs out of space if this is set to true
|
Events
| Name | Description |
| -------------- | ------------------------- |
| open:popper
| When the Popper is opened |
| close:popper
| When the Popper is hidden |
Slots
| Name | Description |
| --------- | ---------------------- |
| content
| For the Popper content |
Slot props
The content
slot gives you access to useful variables and functions.
| Name | Type | Description |
| -------- | -------- | ------------------------------ |
| close
| function | A function to close the Popper |
| isOpen
| boolean | The open
state of the Popper |
CSS variables
Popper
only comes with some barebones styling by default, but it also uses a list of predefined CSS variables. You can overwrite these variables to suit your needs.
| CSS variable | Example value |
| --------------------------------------- | ----------------------------------- |
| --popper-theme-background-color
| #ffffff |
| --popper-theme-background-color-hover
| #ffffff |
| --popper-theme-text-color
| inherit |
| --popper-theme-border-width
| 1px |
| --popper-theme-border-style
| solid |
| --popper-theme-border-color
| #eeeeee |
| --popper-theme-border-radius
| 6px |
| --popper-theme-padding
| 16px |
| --popper-theme-box-shadow
| 0 6px 30px -6px rgba(0, 0, 0, 0.25) |