vue-slick-popover

Popover component using popper.js for Vue.js apps

Installation

npm install vue-slick-popover

Basic usage

1. Import component

import Vue from "vue"
import { VueSlickPopover, VueSlickPopoverContent } from "vue-slick-popover"
import "vue-slick-popover/dist/vue-slick-popover.css"

export default {
    components: {
        VueSlickPopover,
        VueSlickPopoverContent
    }
}

2. Use component

To use the component you need to:

  1. Create a trigger element that will be responsible for showing the popover (that can be anything).
  2. Render VueSlickPopover component using v-if directive responsible for showing an hiding the popover.
  3. Pass popover-options property to the VueSlickPopover with your options.
  4. Pass any content into the default slot exposed by the VueSlickPopover component (that can be anything).
<template>
  <div>
    // trigger element
    <img ref="popoverReference" width="20%" src="./assets/logo.png" @click="openPopover">
    
    // popover component
    <VueSlickPopover
      v-if="isPopoverVisible"
      :popover-options="popoverOptions"
      @closePopover="closePopover"
    >
      // popover content
      <VueSlickPopoverContent>
        <p @closePopover="closePopover">Content</p>
      </VueSlickPopoverContent>
    </VueSlickPopover>
  </div>
</template>
data() {
  return {
    isPopoverVisible: false,
    popoverOptions: {
      animation: "scale-fade",
      popoverReference: null,
      placement: "top",
      offset: "0,0"
    }
  }
},

mounted() {
  this.popoverOptions.popoverReference = this.$refs.popoverReference
},

methods: {
  closePopover() {
    this.isPopoverVisible = false
  },
    
  openPopover() {
    this.isPopoverVisible = true
  }
}

Example usage

Simple usage

Dropdown menu

Temporary form

Onboarding

Interactive demo

vue logo

popover-options

placement

animation

offset

animation-duration

Listeners

closePopover

Function fired when user clicks on the popover overlay.

popover-options

placement

  • type: String

  • default: top

  • available options:

    • top
    • top-start
    • top-end
    • right
    • right-start
    • right-end
    • bottom
    • bottom-start
    • bottom-end
    • left
    • left-start
    • left-end

Popover placement in relation to trigger element. Popper.js documentation

animation

  • type: String
  • default: scale-fade
  • available options:
    • null,
    • scale-fade,
    • fade

Animation applied to popover when showing up.

offset

  • type: String
  • default: 0,0

Modifier that shifts your popper on both its axis.

It accepts the following units:

  • px or unit-less, interpreted as pixels
  • % or %r, percentage relative to the length of the reference element
  • %p, percentage relative to the length of the popper element
  • vw, CSS viewport width unit
  • vh, CSS viewport height unit

You can provide a single value (as Number or String), or a pair of values as String divided by a comma.

Popper.js documentation