Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add icon before menu entries #114

Open
crystalfp opened this issue Jan 1, 2022 · 1 comment
Open

How to add icon before menu entries #114

crystalfp opened this issue Jan 1, 2022 · 1 comment

Comments

@crystalfp
Copy link

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

@crystalfp
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant