vue3-popper

A popover component for Vue 3

Documentation

Check out the documentation

• Getting started
• Usage

Install

NPM

npm install @1024pix/vue3-popper

Yarn

yarn add @1024pix/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 "@1024pix/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) |