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
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
Is it possible to have Vuetify's v-tooltip with a clickable link?
At this point using the default code provided by documentation
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-icon
color="primary"
dark
v-bind="attrs"
v-on="on"
>mdi-home</v-icon>
</template>
clickable link
</v-tooltip>
We can't click the anchor link because once we mouse out the icon, the tooltip automatically closes. Is this a limitation on Vuetify ?
You have 2 problems to solve:
Tooltip hides as soon as mouse leaves the activator (the icon). Just use close-delay prop set to (for example) 2000 (ms) ...so the tooltip wont disappear immediately but only after 2 seconds when you move mouse out of the icon...
By default, Vuetify tooltip's content is rendered with the pointer-events: none; CSS property. Which means the content do not generate any pointer events. Only thing you can do about it is to override the default style...
template
<v-tooltip bottom close-delay="2000">
<template v-slot:activator="{ on, attrs }">
<v-icon
color="primary"
dark
v-bind="attrs"
v-on="on"
>
mdi-home
</v-icon>
</template>
clickable link
</v-tooltip>
style
.v-tooltip__content {
pointer-events: initial;
}
Demo
You can control visibility by using v-model on the tooltip.
The following is taken from vuetifys example on visibility:
<v-tooltip
v-model="show"
top
>
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
>
<v-icon color="grey lighten-1">
mdi-cart
</v-icon>
</v-btn>
</template>
<span>Programmatic tooltip</span>
</v-tooltip>
And then define show in data:
show: false
https://vuetifyjs.com/en/components/tooltips/#visibility
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
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
I'm using v-dialog component.I can popup v-dialog by state but can't close when press close button which have to get value false
Here is my code
<v-dialog :value="productSellingStatus" persistent max-width="290">
<v-card>
<v-card-title class="headline">Use Google's location service?</v-card-title>
<v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" text #click="!productSellingStatus">Disagree</v-btn>
<v-btn color="green darken-1" text #click="this.dialog=!productSellingStatus">Agree</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
//in script
computed: {
...mapState(["productSellingStatus"])
I can open modal when my productSellingStatus state become true in mutation
You should have a mutation in the Vuex store...
[TOGGLE_SELLING_STATUS] (state, bool) {
state.productSellingStatus = bool
},
and then toggle it from a method in the component...
toggleSellingStatus (val) {
this.$store.commit('TOGGLE_SELLING_STATUS', val)
},
You can also use $store directly.
$store.state.productSellingStatus=false
<v-btn color="green darken-1" text #click="this.dialog=!$store.state.productSellingStatus">Agree</v-btn>