Quasar 
Dropdown Button
QBtnDropdown is a very convenient dropdown button. Goes very well with QList as dropdown content, but it’s by no means limited to it.
Installation
Edit /quasar.conf.js:framework: {
components: ['QBtnDropdown']
}
Basic usage
Simple dropdown menu<q-btn-dropdown label="Button">
<!-- dropdown content -->
<q-list link>
<q-item>
<q-item-main>
<q-item-tile label>Item</q-item-tile>
</q-item-main>
</q-item>
</q-list>
</q-btn-dropdown>
Use the split prop to separate target areas for opening dropdown and triggering @click event<q-btn-dropdown split label="Button" @click="handlerFunction">
<!-- dropdown content -->
<q-list link>
<q-item>
<q-item-main>
<q-item-tile label>Item</q-item-tile>
</q-item-main>
</q-item>
</q-list>
</q-btn-dropdown>
Vue Properties
All props except split are shared with QBtn.
| Vue Property | Type | Description |
|---|---|---|
split | Boolean | Use a split QBtnDropdown |
icon | String | Name of the icon to use. |
icon-right | String | Name of the icon to place on right side of button. |
loading | Boolean | Display a spinner, if true. Can be optionally used along v-model. Check Button with Progress section. |
percentage | Number | Optional property for displaying a determinate progress. Use along loading. |
dark-percentage | Boolean | Optional property for displaying a determinate progress on a light button color. Use along loading and percentage. |
disable | Boolean | The button is disabled, if true. @click event won’t be triggered while in this state. |
label | String/Number | Button label. |
tabindex | Number | Set explicit tab index. |
repeat-timeout | Number/Function | Enables multiple @click events on click/tap and hold. Function gets a Number (timesTriggered) as parameter. |
wait-for-ripple | Boolean | Wait for ripple then before emitting @click event. Mat theme only. |
content-class | String/Array/Object | Classes applied to the Popover container. |
content-style | String/Array/Object | Style applied to the Popover container. |
Apearance
| Vue Property | Type | Description |
|---|---|---|
size | String | Button size. One of xs, sm, md, lg, xl, or a css string size eg. 25px, 2rem, 3vw. |
color | String | A color from Quasar Color Palette. |
text-color | String | A color from Quasar Color Palette. |
align | String | Label/Content alignment. One of left, center, right, around, between. |
dense | Boolean | Dense Button. |
round | Boolean | Set true, if you want a round button. |
outline | Boolean | Set true, if you want an outlined button. |
flat | Boolean | Set true, if you want a flat button. |
push | Boolean | Set true, if the button should have a push effect. |
rounded | Boolean | Set true, if the square button should have rounded corners. |
glossy | Boolean | Set true, if the button should be glossy. |
fab | Boolean | Floating Action Button. See |
fab-mini | Boolean | Smaller Floating Action Button. |
no-wrap | Boolean | Prevent text wrapping |
no-caps | Boolean | Set true, if you don’t want button content/label to be transformed to uppercase letter on Material Theme. |
no-ripple | Boolean | Disable Material Ripple. Mat theme only. |
Vue Events
| Vue Event | Description |
|---|---|
@click | Triggered on button click/tap, if button is not disabled. |
More examples
Complete example with QList:
Note the use of the
v-close-overlaydirective to close the dropdown on click. Don’t forget to register it inquasar.conf.js
<q-btn-dropdown |