https://github.com/joearcher/vue-droppler
Vuejs 2 / Drop.js dropdown content component.
https://github.com/joearcher/vue-droppler
Last synced: 4 months ago
JSON representation
Vuejs 2 / Drop.js dropdown content component.
- Host: GitHub
- URL: https://github.com/joearcher/vue-droppler
- Owner: joearcher
- License: mit
- Created: 2017-01-27T13:17:50.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-19T16:22:57.000Z (over 8 years ago)
- Last Synced: 2024-10-14T04:32:36.248Z (about 1 year ago)
- Language: Vue
- Homepage:
- Size: 7.81 KB
- Stars: 23
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: readme.MD
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-refactor - vue-droppler
README
# 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](https://github.com/HubSpot/drop).
Droppler supports all of the options for drop.js.
## Installation
```bash
npm install vue-droppler
```
## Use
Register droppler as a global component:
```javascript
Vue.component('droppler', require('vue-droppler'));
```
or use it in a single component:
```javascript
var Droppler = require('droppler');
...
components: {
'droppler': Droppler
}
...
```
### Basic example
```javascript
Click me
Some content for the dropdown.
```
### 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](http://github.hubspot.com/drop/)
```javascript
{
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
```javascript
Click me
Some content for the dropdown.
```
## License
Copyright © 2017 Joe Archer - [MIT License](LICENSE)