@maqe-vue/dropdown
The Vue2 component for dropdown
See demo on: Storybook
Installation
NPM
Install the npm package.
npm install @maqe-vue/dropdown --save
Register the component
import VqmDropdown from '@maqe-vue/dropdown'
import '@maqe-vue/dropdown/dist/style.css'
Vue.component('vmq-dropdown', VqmDropdown)
Usage
Basic
<vqm-dropdown
v-model="input"
:list="list"
label-style="label-inside"
label="Label"
size="medium"
/>
<script>
export default {
data() {
return {
input: "",
list: [
{ title: "Selection 1", value: "1" },
{ title: "Selection 2", value: "2" },
{ title: "Selection 3", value: "3" },
{ title: "Selection 4", value: "4" },
{ title: "Selection 5", value: "5" },
{ title: "Selection 6", value: "6" }
]
};
}
};
</script>
Search
Searching supported to arrow up, down and enter keys.
<vqm-dropdown
v-model="input"
:list="list"
label-style="label-inside"
label="Label"
size="medium"
searchable
/>
API
Props
Name | Type | Description | default |
---|---|---|---|
v-model |
bind |
||
containerClass |
string |
||
searchable |
boolean |
false |
|
label-style |
string |
`label-inside | label-outside |
label |
string |
||
placeholder |
string |
||
disabled |
boolean |
false |
|
required |
boolean |
false |
|
helper-text |
string |
||
size |
`small | medium | large` |
size-dropdown-list |
`small | large` |
Style
Custom Style
Custom style with css variable
<vqm-dropdown
v-model="input"
:list="list"
label-style="label-inside"
label="Label"
size="medium"
/>
// for example to set as a global
<style>
:root {
--vqm-dropdown-color: tan;
--vqm-dropdown-hover-color: rgba(203, 203, 203, .2);
--vqm-dropdown-selected-color: tan;
}
</style>