Here, I have used vuetify to create buttons which pop up dialog box that contains buttons with different colors and I want to use buttons to change the background color of navigation and menu bar but due to my limited knowledge on vue and vuetify I am not able to change my background color. Can anyone help me???
My code is here:
<template>
<v-row justify="center">
<v-dialog v-model="dialog" persistent max-width="600px" class="pa-md-4 mx-lg-auto">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">Theme</v-btn>
</template>
<div class="text-center">
<v-btn v-for="(item) in colors" :color="item" dark large class="ma-2" style="width:100px;">
<span class="text-truncate" style="width:120px;">
{{item.replace(/-/g, '')}}
</span>
</v-btn>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text #click="dialog = false">Close</v-btn>
<v-btn color="blue darken-1" text #click="dialog = false">Save</v-btn>
</v-card-actions>
</div>
</v-dialog>
</v-row>
</template>
<script>
export default {
data(){
return{
colors: ["red","pink","purple","deep-purple","indigo","blue","light-blue","cyan","teal","green","light-green","lime","yellow","amber","orange","deep-orange","brown","blue-grey","grey", "black"],
dialog: false
}
},
} </script>
To do this you actually use themes that you setup in vuetify.js and you can assign different colors to the different values for example primary: '#c3c3c3' and define different themes within your app. It comes with light and dark theme but you can also add/remove themes programmatically.
It's quite a bit of code so I will post the links on where directions can be found here.
https://vuetifyjs.com/en/customization/theme/#custom-theme-variants
And the actual usage can be found here:
https://vuetifyjs.com/en/customization/theme/#usage
Related
I have a button like this on vuetify:
<v-btn color="blue" icon>
<v-icon>mdi-pencil</v-icon>
</v-btn>
And the result is this:
Now I try to do this:
<v-btn class="blue lighten-4" icon>
<v-icon>mdi-pencil</v-icon>
</v-btn>
But the result is this:
While I was expecting just a lightened colour.
How can I achieve my goal? Note that here vuejs 2 is used.
I solved it by writing this:
<v-btn color="blue--text text--lighten-4" icon>
<v-icon>mdi-pencil</v-icon>
</v-btn>
This is because the icon is considered as text and not as background
EDIT:
As #Adam Muse pointed out, a better solution could be adding the class on the <v-icon> tag:
<v-btn icon>
<v-icon color="blue lighten-4">mdi-pencil</v-icon>
</v-btn>
Add the color to your v-icon
<v-icon color="blue lighten4">
I'd avoid in-line stying it with blue--text
you can also use class="blue--text" for text
I have a problem with <v-dialog> that appears everywhere in my Vue.js application using Vuetify.js.
Every <v-dialog> is loading twice on the page. You can see it by looking at how it appears:
If I close one dialog the other dialog stays visible and works exactly like the first. It seems like Vue is generating two instances of it.
The code of the dialog isn't the issue, I think:
<v-dialog
v-model="dialog"
persistent
hide-overlay
no-click-animation
>
<v-card>
<v-card-title>Text</v-card-title>
<v-card-text>
<p class="subtitle-1">Some more text</p>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
depressed
>
Next
<v-icon right>mdi-chevron-right</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
The v-model is declared in data():
export default {
data() {
return {
dialog: true,
};
},
}
Any help is appreciated! Thanks.
I have two icons, how can I make a space between them?
two Icons in App.vue:
<v-btn icon class="grey lighten-4">
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon class="grey lighten-4">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
It's recommended to use built-in class name like mx-2 to add some margin around the buttons after wrapping them by a div:
<div >
<v-btn icon class="grey lighten-4 mx-2">
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon class="grey lighten-4 mx-2">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</div>
LIVE DEMO
according to vuetify v-icon api.
we need to use left or right .
left: Applies appropriate margins to the icon inside of a button when placed to the left of another element or text.
right: Applies appropriate margins to the icon inside of a button when placed to the right of another element or text
I'm new.
Can you tell me how to move the icon above the text?
<v-toolbar-items>
<v-btn text title>
<v-icon>mdi-magnify</v-icon>
Test
</v-btn>
</v-toolbar-items>
This is an open feature request, but the only way I've found to achieve this is to use a CSS override:
.v-btn__content {
display:flex;
flex-direction:column;
}
<v-btn icon>
<v-icon>mdi-heart</v-icon>
<div>Text</div>
</v-btn>
Demo: https://codeply.com/p/55N0Ttd1da
I want to make datetimepicker like this : https://vuetifyjs.com/en/getting-started/consulting-and-support. If you click "2 Hour Consulting Session", it will display datetimepicker like this : https://ibb.co/kHrbHTG. I want to make like that. But I don't find the component datetimepicker in the documentation. The docs : https://vuetifyjs.com/en/components/date-pickers
Based on my analysis, it uses datepicker modal. not the datepimepicker. The timepicker is only customized using the outline button. but I am confused how to place the outline button next to the datepicker
My script like this :
<template>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-dialog
ref="dialog"
v-model="modal"
:return-value.sync="date"
persistent
width="290px"
>
<template v-slot:activator="{ on }">
<v-btn color="success" dark v-on="on">Call datepicker</v-btn>
</template>
<v-date-picker v-model="date" scrollable>
<div class="flex-grow-1"></div>
<v-btn text color="primary" #click="modal = false">Cancel</v-btn>
<v-btn text color="primary" #click="$refs.dialog.save(date)">OK</v-btn>
</v-date-picker>
</v-dialog>
</v-col>
</v-row>
</template>
<script>
export default {
data: () => ({
modal: false,
}),
}
</script>
Is it possible to customize the datepicker to be like that?
That Datepicker is not part of Vuetify. That screenshot you took is in fact an <iframe> of the https://calendly.com/ website, which looks like a website for managing appointments. So that calendar is basically just custom CSS made by that company, nothing to do with Vuetify.