vue-balloon
Vue.js plugin to create a floating element that expands when clicked.
Check out the example here.
Dependencies
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
.
Install & Basic Usage
Add as dependency with npm or yarn.
npm install vue-balloon --save
or
yarn add vue-balloon
<!-- balloon content goes here.. for example a youtube video with the vue-youtube-embed plugin -->
Multiple Balloons
To achieve multiple fixed balloons on the same page we use Vue's scoped slot functionality paired with the vue-balloon BalloonSet component.
<!-- The multi balloon content goes here, scoped by the 'balloon' variable. In this example we will extract the videoId attribute from each balloon object to use in the video props -->
Caveats and Gotchas
For multiple balloons with the BalloonSet component:
- Whenever a balloon is
maximized
to take up most of the window it will re-render the slot contents from scratch. - If you need to have reactive data inside each balloon it is recommended to store it inside of a nested balloon object. Otherwise the attributes are considered slot props and cannot be modified. For example:
<!-- Some balloon with form content --> Name:
Balloon
Component: methods
These methods are exposed by the balloon component if needed:
methods: // closes the balloon as if hitting the X button // note: closing the balloon merely sets the close data // attribute and does not remove the component itself or // remove it from the balloons array {} // reopen the balloon (reverse of close) {} // maximizes the balloon (full window) { thisballoonStatemaximized = thisballoon } // minimizes the balloon (reverse of maximize) { thisballoonStatemaximized = null }
events
These events are emitted from the balloon component.
v-on:
close
: when the balloon is closedv-on:
open
: when the balloon is openedv-on:
maximize
: when the balloon is maximizedv-on:
minimize
: when the balloon is minimized
props
props: // balloon title title: default: '' type: String // position: bottom-right, bottom-left, top-right, or top-left position: default: 'bottom-right' type: String // enable the css transform: scale() effect zooming: default: false type: Boolean // hide the close (x) icon on the balloon hideCloseButton: default: false type: Boolean // hide the concise (chevron) icons on the balloon hideConciseButton: default: false type: Boolean // when balloon is created it will have this initial 'concise' state initiallyConcise: default: false type: Boolean // when balloon is maximized, it will still have the close button showCloseWhenMaximized: default: false type: Boolean
BalloonSet
Component: BalloonSet was added in vue-balloon v1.0.18
props
props: // position: bottom-right, bottom-left, top-right, or top-left // (overrides the Balloon component position) position: default: 'bottom-right' type: String // Balloon component data objects array, each object can contain props // that propagate to their own Balloon component balloons: default: type: Array // keep the minimized ballon when the corresponding balloon is maximized dockKeepMaximized: default: false type: Boolean // keep the balloon dock in front of the mask when a balloon is maximized dockBringToFront: default: false type: Boolean
Contributing
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build demo (used to prepare for gitlab pages)npm run build:demo# run unit testsnpm run unit# run e2e testsnpm run e2e# run all testsnpm test