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 contentclickToOpen - every click on the popper triggers open, only clicking outside of the popper closes itclickToToggle - 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