v-contextmenu
v-contextmenu copied to clipboard
How to add icon before menu entries
I want to put an Icon before each entry in a context menu using v-contextmenu.
For items the solution is simple using the "@yeliulee/vue-mdi-svg/v3"
and "@mdi/js"
packages.
<v-contextmenu-item @click.prevent="openMdataDialog">
<MdiSvg class="menu-icon" :path="mdiTextBoxOutline"/>Show mdata
</v-contextmenu-item>
But v-contextmenu-submenu
has no similar way to put an icon in front of the title.
Thanks for helping! mario
If could be of interest to someone, I have found a dirty and not general workaround. In the menu I put the icon just before the submenu title:
<MdiSvg class="submenu-icon" :path="mdiTextBoxOutline"/>
<v-contextmenu-submenu title="Export">
Then added the following styles to move the icon in front of the submenu title:
.v-contextmenu-submenu {
margin-top: -16px;
margin-left: 24px;
padding-left: 0;
}
.submenu-icon {
transform: translate(11px, 10px) scale(0.6);
margin: -4px -4px 0 -8px;
height: 4px;
}
.v-contextmenu-submenu__title {
padding-left: 0; // To avoid hover highlight in front of the icon
}
Hope it helps mario