Vue component, that allows you to create button with dropdown menu
component is created with:
- Vue 2.6.10
install module locally with npm or yarn
npm i @pbartkowicz/buttonmenu
or
yarn add @pbartkowicz/buttonmenu
Import
import buttonmenu from '@pbartkowicz/buttonmenu'
Register in components section
components:{
buttonmenu,
},
Define array with options
data(){
return{
yourArrayWitOptions:[
'option1',
'option2',
'option3'
],
}
}
Use component in your code
<buttonmenu :options="yourArrayWitOptions"/>
You allways can define array with objects
data(){
return{
yourArrayWitOptions:[
{name: 'option1'},
{name: 'option2'},
{name: 'option3'}
],
}
}
And then define label prop for displayed value in dropdown
<buttonmenu :options="yourArrayWitOptions" label="name"/>
When you will define array with objects, you can pass in to objects options:
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| class | String | No | Name of class for option. | |
| disabled | Boolean | No | Option to disable item. | |
| callback | String | No | Name of emmit |
data(){
return{
yourArrayWitOptions:[
{name: 'option1', class: 'your-class-for-option'},
{name: 'option2', disabled: true},
{name: 'option3', callback: 'yourEmmit'}
],
}
}
In this case 'option1' will have class "your-class-for-option" and 'option2' will be disabled. When You select 'option3' then buttonmenu component will emmit 'yourEmmit'
<buttonmenu :options="yourArrayWitOptions" label="name" @yourEmmit="callYourFunction()"/>
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| options | Array | No | Array with dropdown options. | |
| label | String | No | Displayed value in dropdown from object in array. |
There is avaible slot to define your own icon
<vueselect :options="yourArrayWitOptions" label="name">
<template v-slot:icon>
<img src="yourIcon.svg" alt="icon" />
</template>
<vueselect/>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent