I am building a split-button like this one: https://codepen.io/mtermoul/pen/KKMPqvd,
<v-btn-toggle>
<v-btn>Edit Avatar</v-btn>
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn v-on="on" v-bind="attrs"><v-icon>arrow_drop_down</v-icon></v-btn>
</template>
<v-list>
<v-list-item>
<v-list-item-title>Copy from local</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-btn-toggle>
But I don't want the buttons to remain in toggle state after the user clicks them.
Any idea about how to disable that behavior in the v-btn-toggle?
v-btn-toggle have active-state which you cannot disable, till now no support for this feature. You can use the following code
<v-item-group class="v-btn-toggle">
<v-btn>Edit Avatar</v-btn>
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn v-on="on" v-bind="attrs"><v-icon>arrow_drop_down</v-icon></v-btn>
</template>
<v-list>
<v-list-item>
<v-list-item-title>Copy from local</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>Upload</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>Delete</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-item-group>
Paste it in your codepen and its working as expected.
Whenever you face similar problems inspect the element and identify the css attribute that is giving it the style:
This should do:
.theme--light.v-btn--active::before,
.theme--light.v-btn--active:hover::before,
.theme--light.v-btn:focus::before {
opacity: 0 !important;
}
Related
I have a Vuetify v-menu on my App.vue, which appears on every page. When loading a page for the first time, it correctly expands (the menu is used for options such as Sign Out, Account Settings etc). When I navigate to another component (using Vue router), the v-menu does not expand when the new page is loaded. It doesn't work even if I click it (not just hover). What could be the cause of this?
...
<div v-if="signedIn" class="text-center hideOnMobile">
<v-menu
open-on-hover
bottom
offset-y
>
<template v-slot:activator="{ on, attrs }">
<v-btn
elevation='0'
color="primary"
dark
v-bind="attrs"
v-on="on"
class="userDropDown"
>
{{ username }}
<v-icon dark left>mdi-chevron-down</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(item, index) in items"
#click="selectSection(item.title)"
:key="index"
>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
...
<router-view :uid='this.uid' :username='this.username' :userData='this.userData'></router-view>
I am creating a tooltip that appears when an icon is clicked or hovered on; I am using a v-card inside the tooltip:
<v-tooltip bottom min-width="15%">
<template v-slot:activator="{ on, attrs }">
<v-icon small
v-bind="attrs"
v-on="on">
mdi-information
</v-icon>
</template>
<v-card flat height="100%" width="100%" class="ma-0 pa-0">
<v-card-text>
Tooltip Text is here
</v-card-text>
</v-card>
</v-tooltip>
The v-card does not fill the tooltip entirely. How do I make the v-card fill the entire tooltip?
It should be better to use <v-menu> tag with open-on-hover prop instead of <v-tooltip>.
Example:
<v-menu
open-on-hover
offset-y
:close-on-content-click="false"
>
<template v-slot:activator="{ on, attrs }">
<v-icon
small
v-bind="attrs"
v-on="on">
mdi-information
</v-icon>
</template>
<v-card>
...your card data
</v-card>
</v-menu>
Codepen working example
You can easily fill your entire tooltip as I mention there cards are not used here it's made on sheet which could be filled with span tag inside span Whatever you want to write you can...
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-icon color="primary"
dark
v-bind="attrs"
v-on="on" left>
mdi-information
</v-icon>
</template>
<span>Bottom tooltip</span>
</v-tooltip>
Add this to the v-tooltip content-class="pa-0". You need to override the padding: 5px 16px; that's on .v-tooltip__content. Reference to Vuetify docs on why you use content-class instead of class (detached element like v-dialog and v-menu).
I'm using this exact code from the documentation
<div class="d-flex justify-center align-center">
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on"> Dropdown </v-btn>
</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>
to render it
but sadly, I'm getting it
the dropdown button is completely invisible
I'm using the Vuetify version 2.3.6
I've been trying to implement a v-menu on a v-btn that as v-for. It works fine without v-for. I'm retrieving the category name using axios. So dont mind that. I just want the v-menu to work like that.
<div class="text-center">
<v-menu
:close-on-content-click="false"
:nudge-width="200"
offset-x
>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="indigo"
dark
v-bind="attrs"
v-on="on"
:value="categoryid"
v-for="(categoryItem, i) in categoryList" :key="i"
#click="subcat(categoryItem._id)"
>
{{ categoryItem.cname }}
</v-btn>
</template>
<v-card>
<v-list>
<v-list-item>
<v-list-item-avatar>
<img
src="https://cdn.vuetifyjs.com/images/john.jpg"
alt="John"
/>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>John Leider</v-list-item-title>
<v-list-item-subtitle
>Founder of Vuetify</v-list-item-subtitle
>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
<v-divider></v-divider>
</v-card>
</v-menu>
</div>
I have some problems with my Vue.js Project.
Parent Component:
<v-menu>
<template v-slot:activator="{ on }">
<more-actions :ref="'moreActions' v-on="on" />
</template>
<v-list>
<v-list-item #click="handleClick()">
<v-list-item-title>
Sample
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
MoreActions Component
<template>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn icon v-on="on" #click="$emit('click', $event)">
<v-icon small>
more_vert
</v-icon>
</v-btn>
</template>
<span>More Actions</span>
</v-tooltip>
</template>
This code is running well(under Vuetify v2.1.9), but doesn't run in Vuetify v2.1.15
(The menu is opend the top left corner.)
How can I fix this?
Here is running code in v2.1.15
<template>
<div class="text-center">
<v-menu>
<template v-slot:activator="{ on: menu }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn icon v-on="{ ...tooltip, ...menu }" #click="$emit('click', $event)">
<v-icon small>
more_vert
</v-icon>
<v-btn>
</template>
<span>Im A ToolTip</span>
</v-tooltip>
</template>
<v-list>
<v-list-item #click="handleClick()">
<v-list-item-title>
Sample
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
Please help me.
move this part to the parent component.
and using <slot /> instead of this part in Child Component.
<v-list>
<v-list-item #click="handleClick()">
<v-list-item-title>
Sample
</v-list-item-title>
</v-list-item>
</v-list>