I'm using a Vuetify v-menu to display a choice of country. Next to the v-chip title is a down chevron. When I click the chip to activate the menu, I want the chevron to change to an up chevron. I want to toggle the v-icon when the slot is active. I've tried various flavors and I could swear I got this code off a working project. But the icon never changes.
<template v-slot:activator="{ on }">
<v-chip label v-on="on" class="mr-2">
U.S. CANADA & CROSS BORDERS
<v-icon right v-if="on">mdi-chevron-up</v-icon>
<v-icon right v-else>mdi-chevron-down</v-icon>
</v-chip>
</template>
If on is the event, how do I get at the isActive property?
activator has another property called value which is boolean :
<template v-slot:activator="{ on,value }">
<v-chip label v-on="on" class="mr-2">
U.S. CANADA & CROSS BORDERS
<v-icon right v-if="value">mdi-chevron-up</v-icon>
<v-icon right v-else>mdi-chevron-down</v-icon>
</v-chip>
</template>
Related
Is it possible to have Vuetify's v-tooltip with a clickable link?
At this point using the default code provided by documentation
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-icon
color="primary"
dark
v-bind="attrs"
v-on="on"
>mdi-home</v-icon>
</template>
clickable link
</v-tooltip>
We can't click the anchor link because once we mouse out the icon, the tooltip automatically closes. Is this a limitation on Vuetify ?
You have 2 problems to solve:
Tooltip hides as soon as mouse leaves the activator (the icon). Just use close-delay prop set to (for example) 2000 (ms) ...so the tooltip wont disappear immediately but only after 2 seconds when you move mouse out of the icon...
By default, Vuetify tooltip's content is rendered with the pointer-events: none; CSS property. Which means the content do not generate any pointer events. Only thing you can do about it is to override the default style...
template
<v-tooltip bottom close-delay="2000">
<template v-slot:activator="{ on, attrs }">
<v-icon
color="primary"
dark
v-bind="attrs"
v-on="on"
>
mdi-home
</v-icon>
</template>
clickable link
</v-tooltip>
style
.v-tooltip__content {
pointer-events: initial;
}
Demo
You can control visibility by using v-model on the tooltip.
The following is taken from vuetifys example on visibility:
<v-tooltip
v-model="show"
top
>
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
>
<v-icon color="grey lighten-1">
mdi-cart
</v-icon>
</v-btn>
</template>
<span>Programmatic tooltip</span>
</v-tooltip>
And then define show in data:
show: false
https://vuetifyjs.com/en/components/tooltips/#visibility
I have a text field built right into a vuetify expansion panel.
After clicking the "rename box" icon
The issue is that every time I type a spacebar into the text box the expansion panel toggles. I have prevented the event propagation of a click by using click.stop="" attribute but I cant seem to prevent this space bar event from affecting the parent.
Attributes that I have tested are:
keydown.stop
keydown.prevent ('Cant type with this option')
keydown.self
keydown.capture
input.stop
change.stop
The following are the events emitted according to the vue plugin
Here is the code
<v-expansion-panel
active
v-for="(item, i) in $store.state.data"
:key="i"
>
<v-expansion-panel-header>
<div v-if="editorQ !== i">Q. {{ item.q }}</div>
<v-text-field
v-else
label="Question"
:value="newQuestion"
#click.stop=""
#change.stop="updateQ"
#keydown.stop=""
></v-text-field>
<template v-slot:actions>
<v-btn
v-if="editorQ === i"
#click.stop="doneEditingQuestion(i)"
depressed
icon
text
>
<v-icon> mdi-check </v-icon>
</v-btn>
<v-btn
class="upright"
v-else
#click.stop="editQuestion(i)"
depressed
icon
text
>
<v-icon> mdi-rename-box </v-icon>
</v-btn>
</template>
</v-expansion-panel-header>
<v-expansion-panel-content>
It was just trial and error for me, the following prevents the active toggle:
#click.stop
#keyup.prevent
when applied to the v-text-field within a v-expansion-panel-header.
Codepen
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn
fab
color="green"
v-on="on"
bottom
right
fixed
:loading="isRefreshing"
#click="refreshFiles"
>
<v-icon color="white">mdi-sync</v-icon>
</v-btn>
</template>
<span>Refresh</span>
</v-tooltip>
<v-bottom-navigation v-if="isMobileViewVisible" app fixed grow shift>
<template v-for="item in menuItems">
<v-btn
v-if="item.isVisible"
:key="item.title"
icon
#click="goToRoute({ name: item.name, params: item.params })"
>
<span>{{ item.title }}</span>
<v-icon>{{ item.icon }}</v-icon>
</v-btn>
</template>
<v-btn icon #click="toProfileEdit">
<span>Profile</span>
<v-icon>mdi-account</v-icon>
</v-btn>
</v-bottom-navigation>
I am using vuejs with vuetify, I have one query where I am stuck, The issue is I am using bottom navigation bar to route to various components(pages), and each page has a floating action button in right bottom, The issue the floating action button is getting hide inside the bottom navigation bar.
Is there any idea or way on how to overcome this issue ??
Any help with example would be appreciated ..
As you can see the green button is getting hide behind bottom nav bar.
Try out to use an inline style :
<v-btn style="z-index:100; bottom:72px;" fab ...
I want to add a v-tooltip to the v-btn I'm using to trigger the datepicker for a my charting application. Here is code that is working, before attempting to integrate the tooltip.
<v-menu ref="menu" v-model="menu"
:close-on-content-click="true"
:return-value.sync="date"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-btn v-on="on"
:style="{left: '50%', transform:'translateX(-50%)'}"
light
icon
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
</template>
<v-date-picker
v-model="date"
no-title
scrollable
>
</v-date-picker>
</v-menu>
With the above, I click the button, I get the datepicker, all is good. I have tried a bunch of different ways to add a v-tooltip, e.g. wrapping the whole block, wrapping just the template and wrapping just the button. Wherever I place the tooltip code, it breaks the whole setup in that either the button doesn't show or the click on it isn't processed.
Buttons being ideal for tooltips, to reveal their functionality without having to click to find out, this seems like a reasonable thing to do. It is easy to use v-btn to trigger lists, but I find very few examples of people using buttons to display datepickers, even though lots of people are asking questions online about it. I'm hoping there is a technique for tooltips that can be used with a variety of pickers actuated from .
Any ideas?
Fixed it for you, try now:
Demo: https://codepen.io/aQW5z9fe/pen/vYNdJwO?editors=1010
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on: menu }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn
v-on="{ ...tooltip, ...menu }"
:style="{left: '50%', transform:'translateX(-50%)'}"
light
icon
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
</template>
<span>Tooltip</span>
</v-tooltip>
</template>
<v-date-picker
v-model="date"
no-title
scrollable
>
</v-date-picker>
</v-menu>
I want to customize the colors of Vuetify. So I am using slots of various components to do it. While I am able to achieve custom color for checkbox in header using header.data-table-select slot. The color of checkbox when only some of the rows are selected(but not all) is still grey. Can anyone suggest what I can do to customize its color.
Link to codesanbox
Problem screenshot
Partially working
When value is false, v-simple-checkbox doesn't apply color.
but props.value become true only when all values are selected.
I think this way is better.
<template v-slot:[`header.data-table-select`]="{ props, on }">
<v-simple-checkbox
:value="props.value || props.indeterminate"
v-on="on"
:indeterminate="props.indeterminate"
color="primary"
/>
</template>
I fixed it this way.
<template v-slot:header.data-table-select="{ props, on }">
<v-simple-checkbox
color="primary"
v-if="props.indeterminate"
v-ripple
v-bind="props"
:value="props.indeterminate"
v-on="on"
></v-simple-checkbox>
<v-simple-checkbox
color="primary"
v-if="!props.indeterminate"
v-ripple
v-bind="props"
v-on="on"
></v-simple-checkbox>
</template>