V-menu
lastmod 2021-07-14created 2021-07-144 edits
The v-menu component shows a menu at the position of the element used to activate it.
Usage
When using it, you must add the activator slot.
Example
<v-menu
transition="slide-y-transition"
:offset-y="true"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
@click="onClickConfigButton"
v-bind="attrs"
v-on="on"
>
<v-icon>settings</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item>
<v-list-item-title v-text="'API Origin'"></v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title v-text="'Dark/Light'"></v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-content v-text="'Language'"></v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
Activator and tooltip
With the new v-slot syntax, nested activators such as those seen with a v-menu and v-tooltip attached to the same activator button, need a particular setup in order to function correctly. Note: this same syntax is used for other nested activators such as v-dialog w/ v-tooltip.
With the new v-slot syntax, nested activators, such as a v-menu and a v-tooltip attached to the same activator button, need a particular setup to work correctly.
| INFORMATION |
| This syntax is used for other nested activators such as v-dialog/v-tooltip. |
<template>
<div class="text-center">
<v-menu>
<template v-slot:activator="{ on: menu, attrs }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="{ ...tooltip, ...menu }"
>
Dropdown w/ Tooltip
</v-btn>
</template>
<span>Im A ToolTip</span>
</v-tooltip>
</template>
<v-list>
<v-list-item
v-for="(item, index) in items"
:key="index"
>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>