Animated Popover Component For Vue – slick-popover

Description:

slick-popover is a Vue.js component that attaches an interactive, animated popover to any DOM element.

More features:

  • 12 positions
  • 2 animations: fade, scale-fade
  • Custom offset.

How to use it:

1. Import the component & stylesheet in your project.

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

2. Register the component.

export default {
    components: {
        VueSlickPopover,
        VueSlickPopoverContent
    }
}

3. Create a popover component together with the trigger element in the template.

<template>
  <div>
    <img ref="popoverReference" width="20%" src="trigger.png" @click="openPopover">
    <VueSlickPopover
      v-if="isPopoverVisible"
      :popover-options="popoverOptions"
      @closePopover="closePopover"
    >
      <VueSlickPopoverContent>
        <p @closePopover="closePopover">Popover Content Here</p>
      </VueSlickPopoverContent>
    </VueSlickPopover>
  </div>
</template>

4. Activate the component.

data() {
  return {
    isPopoverVisible: false,
    popoverOptions: {
      // options here
    }
  }
},

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

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

5. Possible options to customize the popover.

  • animation: null, scale-fade, or fade
  • placement: top, top-start, top-end, right, right-start, right-end, bottom, bottom-start, bottom-end, left, left-start, left-end
popoverOptions: { 
  animation: "scale-fade",
  placement: "top",
  offset: "0,0"
}

Download Details:

Author: mateuszRybczonek

Live Demo: https://vue-slick-popover.netlify.com/docs/#interactive-demo

Download Link: https://github.com/mateuszRybczonek/vue-slick-popover/archive/master.zip

Official Website: https://github.com/mateuszRybczonek/vue-slick-popover

Last Update: September 17, 2019

Install:

# NPM
$ npm install vue-slick-popover --save

You Might Be Interested In:

Tags:

Add Comment