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 Fix hover close delay option Mar 16, 2017
.gitignore
LICENSE Initial commit Jan 27, 2017
index.js Initial commit Jan 27, 2017
package.json update package.json for version 0.4.1 Mar 19, 2017
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.