I have a v-checkbox-btn component from the new Vuetify 3 framevork:
<v-checkbox-btn color="grey-darken-2" class="my-0 py-0 ps-1" density="compact"
v-model="yesNo" :label="Yes / No"
#mouseover="cbMouseOver" #mouseout="cbMouseOut" />
My problem is, that when I hover over the label, the mouseover event isn't triggered. Only the checkbox triggers it.
I tried #mouseover and #mouseenter too - same behaviour. I haven't tried Vuetify version 2, just the new one.
How can I trigger the mouseover method for the label too?
Related
I have a simple autocomplete menu just like the one below.
Is there any way to monitor if the user clicks outside the menu? By default, if the user clicks outside the menu, it will close the menu. But I would like to trigger other actions besides just closing the menu.
I will keep it simple with the following scenario:
I have a boolean variable called myBoolVar that has a default value of false.
When the autocomplete is mounted, it will autofocus the input and the menu will only open when the user starts typing in the input. Untill here the myBoolVar remains false. but only when the user clicks outside of the menu, then the menu closes and the myBoolVar changes to true.
I have been through vuetify api documentation without any luck so far.
<v-autocomplete
v-model="valuesActor"
:items="actorArray"
:search-input.sync="searchActor"
filled
autofocus
background-color=#313131
append-icon=""
prepend-inner-icon="mdi-arrow-left"
color="var(--textLightGrey)"
>
</v-autocomplete>
You can use blur event for autocomplete like that:
methods: {
someMethod() {
alert('tadam')
}
}
<v-autocomplete
v-model="value"
:items="items"
#blur="someMethod"
/>
You can find the documentation here https://vuetifyjs.com/en/api/v-autocomplete/#events
You can use the v-click-outside directive calls a function when something outside of the target element is clicked on.
for more info see the vuetify: v-click-outside docs.
You can use something like this
<v-autocomplete
v-click-outside="onClickOutside"
....
and on click outside you can call method
methods: {
onClickOutside () {
....
},
},
I am using Apache Struts, version 1.3 HTML form.
I'd like to change the color of the radio button. Please see below, the line of code corresponding to the radio button :
<html:radio property="search.dateRange" style = "color:red;" value="demo" />
I was expecting the radio button to be red, but it does not work.
<html:radio property="search.dateRange" style = "accent-color:red;" value="demo" />
I'm using Button component from NativeBase, is there any way to giving feedback that showing user has pressed the button like TouchableOpactiy does?
I have this iterator that displays several components:
https://codepen.io/anon/pen/zRyGmq
The problem is, when I click the menu button on one of them, the value of menu v-model changes to true for all of them.
I have just started with Dojo widgets. Recently, I did this Dijit Horizontal Slider Sample,and I have been wondering how to make a tooltip follow the slider handle with the current slider value as the tooltip content.
I have tried the same but am facing two issues:
One, the tooltip appears at the end of the slider rather than constantly hovering on the slider handle.
Two, the tooltip displays a value only when I stop sliding rather than changing seamlessly.
How to overcome these?
If you want the tooltip to move with the slider, you have to find a way to open it from the slider handle, not from the entire horizontal slider widget. I do not know if the actual slider you move with the mouse is it's own widget or not. From the declarative sample online the HTML for the handle looks like this
<div data-dojo-attach-point="sliderHandle,focusNode" class="dijitSliderImageHandle dijitSliderImageHandleH" data-dojo-attach-event="press:_onHandleClick" role="slider" aria-valuemin="-10" aria-valuemax="10" tabindex="0" aria-valuenow="4" style="position: absolute;"></div>
So you can try something like the following, if you can get a reference to the sliderHandle object.
/*
* Create the tooltip dialog that you want to show (I use tooltip dialog,
* but you can do the same with basic tooltip)
*/
var myTooltipDialogbase = new ttdialog({
id: 'myTooltipDialogBase',
style: "width: 275px;"
});
Then in your event handler (in this example right mouse click) you open the popup
/**
* On right mouse click, opens the tooltip dialog
*/
on(sliderHandle, 'contextmenu', function (event) {
popup.open({
parent: sliderHandle,
popup: myTooltipDialogbase,
around: sliderHandle.domNode
});
});
EDIT:
For your second question, you can use the slider property onChange() to do something each time the value of the slider changes. You must set intermediateChanges=true so onChange is called when sliding. In your case, in onChange(), if you can get a reference to the tooltip, then change the value of one of the tooltip objects for every value change of the slider.