Create a floating element that expands when clicked using a Vue.js plugin

vue-balloon

vue-balloon can be used as a plugin to create a floating elements which expand when clicked.

Live Demo

To learn how to avoid the trouble implementing your own solution for expandable elements containing any content, follow the simple example below.

Example

To start working with the component use the following command to install it:

npm install vue-balloon --save

or

yarn add vue-balloon

This plugin uses font awesome icons so either include that or redefine custom icons for the classes .fa-chevron-up, .fa-chevron-down, .fa-expand, .fa-compress, .fa-close.

There are props and events below you can use to make it fit to your needs.

Props

props: {
  // balloon title
  title: {
    default: ''
  },

  // position: bottom-right, bottom-left, top-right, or top-left
  position: {
    default: 'bottom-right'
  },

  // enable the css transform: scale() effect
  zooming: {
    default: false
  },

  // hide the close (x) icon on the balloon
  hideCloseButton: {
    default: false
  },

  // hide the concise (chevron) icons on the balloon
  hideConciseButton: {
    default: false
  }
}

Usage

Using some of the options above we can create the following example:

<template>
  <div id = 'demo'>
    <balloon
      title = 'Advice'
      position = 'top-left'
      zooming = "true"
            @maximize = 'doThis'
      @minimize = 'doThat'
    >
      <!-- balloon content goes here.. for example a youtube video with the vue-youtube-embed plugin -->
      <img src="https://i.imgur.com/ILNByxfg.jpg" alt="">
    </balloon>
  </div>
</template>

<script>
  import { Balloon } from 'vue-balloon'

  export default {
    components: { Balloon },
    methods: {
      doThis () {
        // do stuff
      },
      doThat () {
        // do stuff
      }
    }
  }
</script>

And there it is, a expandable element placed in any corner of a window, with manageable content easy and fast.

Demo

This project is open source available on GitHub.