README
Dropper.mood
The best Vue.js dropdown.
Description
Dropper.mood is an intelligent dropdown component designed with Vue.js. It can be integrated into any Vue.js project and with several options and functionalities.
Documentation
<<<<<<< HEAD Documentation
d24202057dc3b5744ae337d92822954f934f7765
Installing
# npm
npm i --save dropper.mood
# yarn
yarn add dropper.mood
Usage
Dropper.mood is very simple to use.
Overall use
import Vue from 'vue';
import Dropper from 'dropper.mood';
import 'dropper.mood/dist/dropper.css';
// You can change the name of the component if you wish
Vue.use(Dropper, { name: 'Dropper' } );
Single file
<script lang="js">
import { Dropper } from "dropper.mood";
import 'dropper.mood/dist/dropper.css';
export default {
components: {
Dropper
}
}
</script>
In your vue.js file
After that you can use the component in your code as follows.
<template>
<div id="app">
<div id="join-element-id">
join element
</div>
<dropper join="#join-element-id" style="max-width: 250px">
<!-- Your code hear -->
</dropper>
</div>
</template>
Props
join
- type: any
- requred: true
It is a valid html selector as an id, a class or any other properties allowing to select the element attached to the dropdown. The dropdown position will be calculated based on the position of the join element.
align
- type: string
- requred: false
- value: left | right | top | bottom
This property defines the dropdown alignment. The latter can be placed on the left, right, top or bottom. If it is not, the alignment will be calculated automatically with respect to the direction property.
direction
- type: string
- requred: false
- value: x | y
This property defines the alignment direction of the dropdown. If its value is x, the dropdown will align either to the left or to the right of the join element. If its value is y, the dropdown will be aligned either at the top or at the bottom of the join element. The default value is y. If the align property is defined, the direction property is not taken into account to calculate the position of the dropdown.
hide-arrow
This property allows you to display or hide the arrow.
- type: boolean
- requred: false
- value: true | false
justify
- type: boolean
- requred: false
- value: true | false
If true, the dropdown will be placed in the middle of the join element. This property is only taken into account if the display screen allows centered alignment.
show-on
- type: string | array
- requred: false
- default: click
this property defines the events of the join element which will trigger the opening of the dropdown. It can be a string if it is a single event or an array of string if it is several. The default value is click.
hide-on
- type: string | array
- requred: false
this property defines the events of the join element which will trigger the closure of the dropdown. It can be a string if it is a single event or an array of string if it is several.
z-index
- type: number
- requred: true
- default: 5000
Choose a large value so that the dropdown is not hidden by other dropdowns.
position-on-resize
- type: boolean
- requred: true
If true, the position of the dropdown will be calculated each time the size of the window is modified.
position-on-scroll
- type: boolean
- requred: false
If true, the position of the dropdown will be calculated with each scroll of the window.
Events
open
The event is triggered each time the dropdown opens.
close
The event is triggered each time the dropdown closes.
align
type: string value: left | right | top | bottom
Returns the position of the dropdown relative to the join element after opening. The values that can be sent are: left, right, top, bottom.
arrow-align
type: string value: left | right | top | bottom
Returns the position of the arrow relative to the dropdown join after opening. The values that can be sent are: left, right, top, bottom.
arrow-on
type: string value: left | right | top | bottom | middle
Returns the position of the arrow relative to the dropdown join after opening.
justify
type: boolean value: true | false
Returns true if the dropdown is positioned in the middle of the join element, and false otherwise.
esc-keydown
Triggers when the escape button is pressed while the dropdown is open.
other-area-clicked
Fires when a zone other than the dropdown receives a click while the dropdown is open.
Functions
You can access certain dropdown functions such as open and close. These two functions will respectively allow you to open and close the dropdown. Here is an example of using the functions.
<template>
<div id="app">
<div id="id-join-element" @click="openDropper">
My join element
</div>
<dropper
join="#id-join-element"
ref="dropper"
@esc-keydown="closeDropper"
@other-area-clicked="closeDropper"
class="my-super-dropdown"
style="width: 250px; background-color: yellow; color: black; border-radius: .3em;"
>
<!-- Your code hear -->
</dropper>
<button @click="openDropper">
open dropdown
</button>
</div>
</template>
<script>
import Vue from 'vue';
export default {
// ...
methods: {
methods: {
openDropper() {
const dropper = this.$refs.dropper;
dropper.open();
}
closeDropper() {
const dropper = this.$refs.dropper;
dropper.close();
}
}
}
}
</script>