How can I center the text inside a v-chip component vertically?
Since it's a vuetify component, I looked at the documentation but there's no such property for this.
<v-chip
v-if="this.drawerNodeData.type == 'Telecom'"
:color="telecom"
text-color="white"
class="chips"
>
{{ this.drawerNodeData.type }}
</v-chip>
As you said styles for chips class are not yet implemented. In that case your code should work as per the requirement as by default chip text center aligned vertically and horizontally. Here is the demo :
new Vue({
el: '#app',
vuetify: new Vuetify()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/vuetify#2.0.1/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify#2.0.1/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"/>
<div id="app">
<v-app id="inspire">
<v-container>
<v-chip color="primary" text-color="white">Default</v-chip>
</v-container>
</v-app>
</div>
Related
I'm trying to add a v-switch to my web app.
But it displays wrong (label should be next to v-switch, but as you can see from the picture)
Any ideas on how to fix this?
I am not sure about your source code but ideally it should work. Here is the Demo :
Vue.use(Vuetify);
new Vue({
el: '#app',
data () {
return {
switch1: false,
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-container>
<v-switch
v-model="switch1"
label="Test Switch Label"
></v-switch>
</v-container>
</v-app>
</div>
Please let me know what challenge you are facing as per above code snippet.
Solved it with this easy-CSS trick!
<style>
.v-input__control label {
top: 0px;
}
</style>
I'm currently working on a project based on Vuetify. I need to insert a <a> tag and icon inside an internationalization text. Generally, it is easy to insert a variable as below shows,
this.$vuetify.lang.$t('I'm {0}', varirable_name)
but in this way, I cannot insert <a> tag or an icon <v-icon>, how could I achieve it?
Just like this,
`this.$vuetify.lang.$t('Here is an icon {0} and a {1}', <v-icon />, <a>link</a>)`
You can use v-html directive to output raw HTML. It will work for basic tags but won't work for Vuetify's v-tags (for example, v-icon).
new Vue({
vuetify: new Vuetify(),
data() {
return {
message: this.$vuetify.lang.t('Here is an bold {0} and a {1}', "<strong>text</strong>", "<a>link</a>")
}
}
}).$mount('#app')
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<v-container><span v-html="message"></span ></v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
I wouldn't recommend using Vuetify tags in composite format strings. Instead, translate the text inside of the tag.
<v-btn class="ma-2" color="primary" dark>
Accept // <- translate only this
<v-icon dark right>
mdi-checkbox-marked-circle
</v-icon>
</v-btn>
I'm trying to stack icons as explained here https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/stacking-icons
but in my project i'm using vuejs and vuetify my icons are thus inside a v-icon element.
Here is what i tried :
<div class="fa-stack fa-2x">
<v-icon>fas fa-camera fa-stack-1x</v-icon>
<v-icon>fas fa-ban fa-stack-2x</v-icon>
</div>
It just show the icon one after the other and not stacked.
Any idea on what i'm missing ? Or is it possible at all ?
Stacked Icons styling approach of Font Awesome apparently is not supported by Vuetify v-icon so far. The good news is you still can implement this feature just with regular HTML tags such as div, i, span, ..etc.
I have attached an example of 2 Vuetify buttons. One of them is implemented with the stacked icons and the other one with Vuetify v-icon.
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.5.1/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-row align="center" justify="space-around">
<v-btn>
search
<span class="ml-2 fa-stack fa-1x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-search fa-stack-1x fa-inverse"></i>
</span>
</v-btn>
<v-btn>
search
<v-icon class="ml-2">fas fa-search</v-icon>
</v-btn>
</v-row>
</v-app>
</div>
<div style="position: relative;" class="mx-2">
<v-icon style="position: absolute; top: 8px; left:8px" dense color="white">
$cloud
</v-icon>
<v-icon color="red" x-large>
$ban
</v-icon>
</div>
I was unable to get the accepted answer to work since I am doing the alternate way of loading font awesome icons. This does seem to work though - however I suggest making classes for the styles.
Update 2022-01-20
Apparently at some point font awesome renamed stack to layers so you can use the vue font awesome library components
<font-awesome-layers class="fa-2x mx-2">
<font-awesome-icon :icon="['fad', 'cloud']" transform="shrink-8 left-2" />
<font-awesome-icon :icon="['fas', 'ban']" class="red--text" />
</font-awesome-layers>
I have the following dropdowns
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-autocomplete label="Country" item-color="secondary" placeholder="Country" color="#B28C81" outlined dense></v-autocomplete>
<v-select item-color="secondary" label="Coin" placeholder="Coin" color="#B28C81" outlined dense></v-select>
</v-app>
</div>
My goal is to change the text color of the field after I have selected an item. I see that the API lets me change the border color when it's active with color and the color of the items of the list with item-color but I want to change the text color after I select an item.
If it's not clear yet, I want the text "Australia" to be blue for instance, how could I do this?
You can use some simple CSS to override the default Vuetify styles.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
countries: ["Australia", "New Zealand"],
coins: ["AUD", "NZD"]
})
})
/*
These are the selectors controlling the selected item
in v-autocomplete and v-select
*/
.v-select__selection,
.v-select__selection--comma,
.v-select.v-text-field input {
color: blue !important;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<v-container fluid>
<v-autocomplete :items="countries" label="Country" placeholder="Country" outlined dense></v-autocomplete>
<v-select :items="coins" label="Coin" placeholder="Coin" outlined dense></v-select>
</v-container>
</v-app>
</div>
How do I remove the background behind the button when I hover or clicking on the v-btn?
I try to set ripple to false, but still have background. I can't find the css does this background.
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.2.15/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.2.15/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-card flat>
<v-card-text>
<v-container fluid class="pa-0">
<v-row>
<v-col cols="12">
<p>Normal</p>
</v-col>
<v-col cols="12" sm="3">
<v-btn ripple="false" icon color="pink">
<v-icon>mdi-heart</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-card>
</v-app>
</div>
For the background when click (ripple features) , you missing the bind annotation, you are passing the string instead of false value. So put the ":" before ripple will do the job.
However, to do with the hover background things, you need to do some hack in css. I'm writing this in scss, you can follow the idea
<v-btn :ripple="false" icon color="pink" id="no-background-hover">
<v-icon>mdi-heart</v-icon>
</v-btn>
<style lang="scss">
#no-background-hover::before {
background-color: transparent !important; <= can set to any color you want
}
</style>
the code above is only set to that specific button with id "no-background-hover" only, if you want this to happen to every other button. Then here is the class of that button, you can change your css query selector to the class level you need
<button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default pink--text" id="no-background"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-heart theme--light"></i></span></button>
I was looking for an answer to this question for some time, I applied a hacked solution from here, but it has visual effects, Thank God I found a property that is responsible for this. You need to add a "plain" property to the button like this:
<v-btn fab large plain><v-icon>mdi-phone</v-icon></v-btn>
This was made a deal for me.
Vuetify guide saying: plain buttons have a lower baseline opacity that reacts to hover and focus.
To take out the background on v-btn, you can use the following css property,
<style scoped>
.v-btn::before {
background-color: transparent;
}
</style>
to remove the ripple effect, you have to use v-ripple,
<v-btn v-ripple="false" icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
Adding the plain prop should do the trick. According the description it will remove "the default background change applied when hovering over a button":
*Wanted to simplify the previous answer, but the edit queue was full.