Droppler

A super simple Vuejs2 dropdown component using drop.js

Droppler is a Vue 2 component for creating fixed position "dropdown" content using drop.js.

Droppler supports all of the options for drop.js.

Installation

npm install vue-droppler

Use

Register droppler as a global component:

Vue.component('droppler', require('vue-droppler'));

or use it in a single component:

var Droppler = require('droppler');

...
components: {
    'droppler': Droppler
}
...

Basic example

<droppler>
    <button slot="drop-trigger">Click me</button>
    <div slot="drop-content">
        Some content for the dropdown.
    </div>
</droppler>

Options

Here is the options object with default values. Any of these can be passed to droppler using a property.

For more information about these options, have a look at the drop.js documentation

{
    position: 'bottom left',
    openOn: 'click',
    classes: 'drop-theme-basic',
    constrainToWindow: false,
    constrainToScrollParent: false,
    hoverOpenDelay:  0,
    hoverCloseDelay:  50,
    focusDelay:  0,
    blurDelay: 50,
    tetherOptions: {}
}

Example with options

<droppler position="top right" openOn="hover" constrainToWindow="true">
    <button slot="drop-trigger" href="#">Click me</button>
    <div slot="drop-content">
        Some content for the dropdown.
    </div>
</droppler>

License

Copyright © 2017 Joe Archer - MIT License