Skip to content
Vuejs 2 / Drop.js dropdown content component.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
LICENSE
index.js
package.json
readme.MD

readme.MD

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

You can’t perform that action at this time.