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
Related
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.
I have a Vue application that is using Vuetify. For some reason the v-chip component is not re-rendering when the binded value is changed.
<v-data-table>
<template v-slot:item.active="{ item }">
<v-edit-dialog :return-value.sync="item.active">
<v-chip :key="item.active" outlined :color="item.active ? 'success' : 'error'">{{ item.active ? "Open" : "Closed" }}</v-chip>
<template v-slot:input>
<v-switch
#change="saveRowField(item.id, 'active', item.active)"
v-model="item.active"
:true-value="1" :false-value="0"
color="success" label="Open"
></v-switch>
</template>
</v-edit-dialog>
</template>
</v-data-table>
The v-switch in the v-edit-dialog correctly updates the binded field item.active. However the v-chip component inside the template does not rerender on state change.
The :key attribute is binded to the same field as the v-switch.
Why is the v-chip not re-rendering when the value binded to the key is changed?
Tried your code and re-rendering content of v-chip is not an issue. What I see is chip is changed once I click v-switch but when v-edit-dialog is closed, the original value is restored.
So the problem is in v-edit-dialog. If you put large prop on it, it will display buttons - "Save" and "Cancel". If you use "Save" button, the value is saved. If "Cancel", original value is restored.
Without buttons, only way to close the dialog is clicking "away", which is interpreted as "Cancel" by v-edit-dialog and thus original value is restored...
Possible solutions:
Either let user use "Save"/"Cancel" buttons to confirm/cancel editing
Or remove :return-value.sync="item.active" (responsible for this Save/Cancel behavior).
Demo
I have vue project without npm, yarn or smth else. I've just downloaded all vue files local
and now I want to use my local icon2 in vuetify v-btn as button icon. How can I do it?
<v-btn icon>
<v-img src="path/to/your/icon.svg" />
</v-btn>
As described in Vuetify's docs, since the v-btn uses a slot for content, you can put any element you want in that slot.
The icon prop simply tells the v-btn to be especially styled for icons (round & flat).
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.
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>