I need to insert a clickable button inside v-text-field under label slot. Meaning that there will be label : " Start typing or Select Search Panel" where "Select Search Panel" will be a link or button.
I'm able to make it visible using the v-slot:label but the button is not clickable and onSearchPanelClicked in not triggered..
<v-text-field class="input-field" clearable prepend-inner-icon="search" solo >
<template v-slot:label class="linkLabel" v-on:click="onSearchPanelClicked">
Start typing or <v-btn v-on:click="onSearchPanelClicked" class="link" flat > Select Search Panel</v-btn>
</template>
</v-text-field>
Is there any way to transfer click event to the element ? If I start typing the label must disappear like it used to work on v-text-field.
Regards
Jan
You have to overwrite your input .v-label CSS rule pointer-events.
Vuetify sets the label inside a v-text-field like this:
.v-text-field .v-label {
pointer-events: none; // unclickable element
}
So changing it to auto will enable your button inside v-text-field label to become the target of pointer events, just be aware of deep selectors when working with scoped styles at your component.
.v-input.input-field .v-label {
pointer-events: auto;
}
/* or for scoped styles */
::v-deep .v-input.input-field .v-label {
pointer-events: auto;
}
In this example the rule is applied only to fields with your custom class .input-field, if you'd like to overwrite for all the v-text-fields just remove it from the CSS code.
Related
I would like to 1) make sure radio buttons are aligned to left 2) decrease the amount of vertical space between label and radio button texts and vertical space between each text
In the example below you can see radio button texts are centered, and also there is about half text height space between them which I would like to decrease
https://codesandbox.io/s/1l3yc9?file=/index.js
Adding to the previous answer to fully answer your question, the label of the radio button can be left aligned using bootstrap's flex class names:
<b-form-radio
v-model="orderType"
:aria-describedby="ariaDescribedby"
name="radios-stacked"
value="L"
class="d-flex justify-content-start"
>Limit</b-form-radio
>
link to completely working CodeSandbox
Here you go...
I don't understand what you're trying to achieve. Can you explain please?
Add the following CSS:
Reduce the vertical space between the label and the first radio button:
legend#__BVID__6__BV_label_,
legend#__BVID__12__BV_label_ {
padding-bottom: 0;
}
Reduce the vertical space between the two radio buttons:
.custom-control {
min-height: initial;
}
.custom-control-label {
line-height: 1.1;
}
.custom-control-label::before,
.custom-control-label::after {
top: 1px;
}
See the forked CodeSandbox here.
To prevent the radio buttons from getting centered, remove the class class="form-inline" from your <b-form-group></b-form-group>.
It will adjust the texts accordingly.
So you should have something like this:
<b-form-group
label="Order type"
v-slot="{ ariaDescribedby }"
label-align="left"
>
...
</b-form-group>
I got some problems with overriding the CSS on slots inside an autocomplete.
I read this thread and tried multiple solutions, but none work that are feasible (since they globally change the style for vuetify components):
How to override vuetify styles?
How would I override the autocomplete styles? E.g right now my problem is that I'm adding an append-slot with a button inside the search field, but the padding of the text field pushes it too much to the left & no padding is applied on the bottom.
Some things I tried:
Creating a parent element with an ID and then manually trying to create a class for it.
Example:
#handlesearch > div > div > div.v-input__slot > div.v-select__slot > div {
margin-top: 4px !important;
}
<template id="handlesearch" slot="append">
<v-btn
>Sök</v-btn
>
</template>
If you inspect your html, you'll notice that adding ID on <template> is not working. If you move your id="handlesearch" to actual html element inside your slot, which is in this case v-btn.
<template slot="append">
<v-btn id="handlesearch">Sök</v-btn>
</template>
with next scoped style
<style scoped>
#handlesearch {
background: red;
}
</style>
Produces next result:
If I move id="handlesearch" to <template> as <template id="handlesearch"> style will not be applied since in my DOM there is no HTML element with that id.
Solution
Move your ID to actual element inside your slot, and add scoped style according to that.
I am having trouble giving the label styles inside of my vuetify v-checkbox component. Here is the documentation https://vuetifyjs.com/en/components/checkboxes/. I basically want to use CSS to change the color of the text that goes in the "label" part of the checkbox. Thank you
You could target the checkbox's label with the .v-input__control .v-label selector:
.v-input__control .v-label {
color: red;
}
demo
You can use the label slot of v-checkbox to style it however you want:
<v-checkbox>
<template slot="label">
<div style="color: red">
label
</div>
</template>
</v-checkbox>
I have a Vue project and I have more than 50 components now, I want to prepare a dark mode for the entire project and I want to control the Mode type from a button on my navbar. I made a test version so I figured how to active and deactive classes but I don't know how to do that for the entire project by clicking a single button or check a checkbox. Here is my test;
<div class="container-main" :class="{'background-dark' : darkMode }">
<!-- Enable Dark Mode -->
<div>
<label class="form-switch">
<input type="checkbox" class="switch switch-md" v-model="darkMode" />
</label>
<label">Enable Dark Mode</label>
</div>
</div>
<style scoped>
.background-dark {
background-color: black;
}
</style>
When the switch is checked, darkMode variable turns to true and the class gets active, so my background color turns to black. My question is, I will create the dark mode version of the CSS file I use right now and I want this control to be in the navbar, how can a button or switch control the entire components' css classes in a project. If I need to use props, how do I do that? Thanks in advance.
How do I make this expansion-panel open content only on clicking icon?
Tried using readonly but it didn't help.
Thanks in advance!
https://vuetifyjs.com/en/components/expansion-panels#expansion-panel
You can put online the argument in all collapse like: expanded={!expanded}
and in the icon you put the onClick={toggle}
I was having the same problem and just found a solution for that.
You need to implement a custom button on the expansion panel, so it will accept custom events. You can achieve that using template and v-slot:
<v-expansion-panel #click.prevent="onClick()">
<v-expansion-panel-header>
...your expansion panel code here
<template v-slot:actions>
<v-btn icon #click.stop="onClick()">
<v-icon>mdi-filter-variant</v-icon>
</v-btn>
</template>
</v-expansion-panel-header>
</v-expansion-panel>
...and your onClick method would be like this:
onClick() {
/*this will toggle only by icon click. at the same time, will prevent toggle
by clicking on header. */
const curr = this.panel
this.panel = curr === undefined ? 0 : undefined
}
It may seem a little magical that the same function is toggling on icon click and preventing toggle on header click, but this happens because the custom icon button does not toggle itself, so we force that using the onClick method. On the other hand, the expansion panel header has its native property of toggling the panel. So when we click it, its value will automatically change and we need to change it back to what it was before the click.
To make the expansion-panel open only on clicking icon you can use css that disables all clicks on the header and only allows clicks on the icon:
<style>
.v-expansion-panel-header{
pointer-events: none;
}
.v-expansion-panel-header__icon{
pointer-events: All;
}
</style>
Keep in mind if you are using scoped style you have use >>>:
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
Here is the template example, I added #click to provide btn like experience when user clicks on an icon, it's not necessary:
<template>
<v-expansion-panel>
<v-expansion-panel-header>
<template #actions>
<v-icon class="icon Icon Icon--32 icon-utility-arrows-carrot_down-32"
#click/>
</template>
</v-expansion-panel-header>
<v-expansion-panels >
<v-expansion-panel-content >
<!--content here-->
</v-expansion-panel-content>
</v-expansion-panels>
</v-expansion-panel>
</template>