I am trying to put a tooltip on a v-icon who randomly gets assigned a color. Every time I mouse over the v-icon, the color changes. I only want the color to be set one time. I do not want the color to change every time the mouse is hovered over the v-icon. Any suggestions?
<v-tooltip bottom>
<template #activator="{on}">
<v-icon v-on="on" :color="getRandomColor()">mdi-close</v-icon>
</template>
<span>Some Tooltip text</span>
</v-tooltip>
I got around this by making a color array in the data: section of Vue and generating the random colors there. Then, I just call that specific array index in color. Something like this:
data() {
return {
rColors: [getRandomColor(), getRandomColor()],
}
}
<v-icon v-on="on" :color="rColors[0]">mdi-close</v-icon>
Is there a way to avoid doing this by putting a keyword in the previous code?
Something like
v-on:once="on" ?
Related
I have a text that displays when I hover a button.
What I'd like is to set the tooltip a bit away from the button (without changing the button's size) because at the moment, it's appearing a bit on the button, they are way too close together.
<v-btn
v-if="
crosshairToggle &&
(tn.length > 10 || tn.length == 0)"
elevation="0"
id="zoom_out"
ref="zoomout"
class="zmbtn minus"
dark
width="45px"
>
<v-tooltip
right
open-delay="500"
>
<template v-slot:activator="{ on }">
<v-icon v-on="on" class="zoom-icon" :color="textLightGrey">
mdi-image-filter-center-focus
</v-icon>
</template>
<span>Focus Mode - Enables when 10 or less actors are mapped</span>
</v-tooltip>
And since the tooltip is only appearing when I'm hovering the button, I can't inspect it. Does anyone know how to set margins on tooltips ?
I believe the prop you are looking for is nudge-top (or nudge-bottom). Take a look at the v-tooltip API page.
Example:
<v-tooltip
right
open-delay="500"
:nudge-top="-50"
>
I want to use a phone icon (mdi-phone) as a prepend-inner in v-text-field.
I can write it like below and everything works fine:
<v-text-field
type="tel"
v-if="!numberIsEntered"
label="phone number"
clearable
required
color="#ff5b1b"
:rules="[
rules.required,
rules.internationalNumber,
rules.nationalNumber
]"
class="mt-10 mb-15"
v-model="userLoginDetails.userNumber"
outlined></v-text-field>
the icon in this code changes color with the input state changes. if there is an error and input changes color to red, the icon's color changes to red as well.
but I wanted the icon to be rotated so I added the below code in <v-text-field></v-text-field>:
<template v-slot:prepend-inner>
<v-icon style="transform:rotateY(-180deg)">mdi-phone</v-icon>
</template>
now the icon's color doesn't change with different input states (e.g: error,...).
is this a bug or there is way to fix it?
EDIT: This issue is being caused by vuetify overriding icon styles with dark theme properties. I rewrote the code as following:
<template v-slot:prepend-inner>
<i aria-hidden="true" class="v-icon notranslate mdi mdi-phone"
style="transform: rotateY(-180deg);"></i>
</template>
Try to pass the icon name as prop in order to take the same color of the input, then define a style rule to rotate the icon :
<v-text-field
type="tel"
class="phone-input"
prepend-inner-icon="mdi-phone"
...
outlined></v-text-field>
style :
.phone-input .v-icon{
transform:rotateY(-180deg)
}
LIVE DEMO
I wanted to make a custom button that basically when clicked on would make a v-data-table pop out below it. I am basically making a data table show up when a button is clicked and using this transition
https://vuetifyjs.com/en/styles/transitions/#scale
But the transition sort of makes the table go to the right more and also has an active state with a background with opacity, basically there is a lot of built in styles that are making it hard to make a table drop down below the button as the default behavior is when you click on the transition, the item that pops up covers the button.
Below is the code that causes this
<v-menu transition="scroll-y-transition" class="scroll-button">
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on">
Scrolling Y Transition
</v-btn>
</template>
<v-data-table> </v-data-table>
</v-menu>
Is there a better way to implement this?
I don't recommend using menu. Maybe you are looking for this kind of animation.
<v-btn #click="show = !show">
{{ show ? 'Hide' ? 'Show' }}
</v-btn>
<v-expand-transition>
<div v-show="show">
<v-table></v-table>
</div>
</v-expand-transition>
And in the script
data() {
return {
show: false
}
}
You should use the native props for v-menu to reposition the menu how you like. See this snippet: https://codepen.io/bgtor/pen/BaWdBMO .
Note the use of offset-y which allow you to offset the menu on the Y axis, and bottom which tell it to offset to the bottom. Also, nudge-left="200px" is translating the menu to the left by "200px". You can find more props for customisation on the vuetify site: https://vuetifyjs.com/en/api/v-menu/.
Other than that, I agree with #scar-2018, it seems odd to display a table in a menu.
How can I check and handle the click event of a v-menu in Vuetify?
The best way is to use v-model on v-menu & watch to variable change.
HTML
<v-menu
v-model="isOpened">
</v-menu>
SCRIPT
export default({
watch:{
isOpened: function(){
// do whatever you want
}
}
})
Here is an example:
<template v-slot:activator="{ on: { click } }">
<v-btn #click="(click) (exit=!exit)" icon>
<v-icon v-if="!exit">mdi-dots-vertical</v-icon>
<v-icon v-else>mdi-close</v-icon>
</v-btn>
</template>
As you can see, if the menu is clicked the exit var is set to its opposite value and therefore the mdi-close icon is shown on the button. If the menu is clicked again, the event changing the exit variable will trigger again and the vertical dots will be shown.
I only posted this question to save the exact syntax for myself for later because I have been digging Vuetify docs for hours and finally figured out how to do it.
By default, Vuetify's v-btn has a "selected state", which from what I can tell, is just a darkened background. I'm using a few v-btns in a v-app-bar. One of these buttons is a Home button. When the vue app is launched (i.e. main route), I want to set the Home button as selected so that the user knows that this is the home page. Is there a simple way that I can do this from the template that I have my v-app-bar in?
<template>
<v-app-bar app fixed>
<router-link to="/">
<v-img src="/assets/my-logo.png" to="/home" class="mx-2" max-height="128" max-width="128" contain/>
</router-link>
<v-btn to="/home" tile>Home</v-btn>
<v-btn to="/another-view" tile>Another View</v-btn>
<v-btn to="/yet-another-view" tile>Yet Another View</v-btn>
</v-app-bar>
</template>
So given the markup above, how can I set the Home button as "active" or "selected" when the page opens up at the default route?
In the v-btn documentation, there's a prop called "input-value" which says that it controls the button's active state. The problem is that its type is "Any", so I'm not sure how to use it (and the documentation doesn't show anything about it). I tried setting to true/false and nothing changes.
Also, if I want to just get rid of all the buttons active states, how do I do that?
Why isn't there a simple solution like focused="true|false"?