I am customizing this dialog menu from the dialog behavior of q-select in quasar. but i cant figure out a way to remove this:
any idea how i should go about this? is this even possible?
You don't need to write extra CSS to just remove the label. You can just remove the label property and it will work.
<q-select color="purple-12" v-model="model" :options="options">
<template v-slot:prepend>
<q-icon name="event" />
</template>
</q-select>
label : String
Description
A text label that will “float” up above the input field, once the field gets focus
Nevermind guys I figured it out. I used .q-select__dialog label{ display: none } and it worked :D
Related
I am using vuetify
and I just wanna add an icon over the button of v-switch,
I searched in slots and found nothing
<v-switch label="Dark mode" flat inset></v-switch>
I wanna do like this picture
You can use v-checkbox, with off-icon and on-icon.
As example:
<v-checkbox class="pt-3"
v-model="$vuetify.theme.dark"
color="purple"
off-icon="mdi-theme-light-dark"
on-icon="mdi-theme-light-dark"
></v-checkbox>
Reference at https://vuetifyjs.com/en/api/v-checkbox/#props
far you can do is append-icon and/or prepend-icon props
you can check the detail at https://vuetifyjs.com/en/api/v-switch/#props
I want to add a text field to the left of Vuetify's data table footer, like so. Does anyone know how to accomplish this?
I know it's possible to hide the footer and build your own, but I want the rest of the default functionality. If anyone has access to the default footer code that could also offer a simpler starting point.
Thank you!
I was able to get the functionality you're looking for by using the footer slot and setting the position of the element to "absolute":
<template v-slot:footer>
<v-checkbox style="position: absolute" class="pa-0 pl-2" label="Show Archived" hide-details />
</template>
Result:
Maybe it is too late, but you can search the elements of footer in the mounted hook. Then append HTML with innerHTML:
mounted() {
var footer = document.getElementsByClassName('v-data-footer')
for (var i = 0; i < footer.length; i++) {
footer[i].innerHTML += '<div>asad</div>'
}
},
Add additional element in slot footer
<template v-slot:footer>create your own text field here</template>
https://vuetifyjs.com/en/api/v-data-table/#slots
I have a v-expansion-panel-header which contains a v-checkbox. If I click on the checkbox the checkbox does not check/uncheck. Instead the expansion panel opens/closes. How do I allow the checkbox to work and have the panel only open when the default icon that is supplied is clicked on?
I have tried using #click.stop and #click.native.stop, #click.capture, #change.stop etc on the v-checkbox, but it doesn't work.
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-header>
<v-checkbox v-model="checkbox" label="MyCB" #click.stop />
</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor.
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
The issue here is that the event is bubbling up from the checkbox to the expansion panel. What you need to do is, when the checkbox is being clicked, pass the event into a function, and cancel the event bubbling.
check: function(e) {
e.cancelBubble = true;
}
Check the working code here
Note that, in the example I had wrapped a v-flex around the v-checkbox. This is because the v-checkbox was spanning the whole width of the expansion panel and I think you still want the expansion to work when you click on places that are not close to the checkbox. You can probably find some other ways of preventing full width in CSS but this was just a quick and dirty way to demonstrate the prevent event bubbling solution.
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>
I'm starting a vue js project and I decided to use Element UI which seams pretty nice.
The problem is I can't find in their documentation how to make a block button, which has the same width as the column where it is placed.
I would appreciate if you can point this out. Thank you!
Keep in mind that vue dispatches the style/class prop to the parent element of your component.
So the following should work:
<el-button style="width: 100%">Default</el-button>
You can make it by adding a full-width column in it,
like so.
<el-row>
<el-col :span="24">
<el-button type="primary"> Your Button Here </el-button>
</el-col>
</el-row>