I need help with creating a text-field, which has an icon inside with a tooltip attached to the icon.
My code:
<v-text-field
v-model="url">
<span slot="label">Url
<v-tooltip bottom>
<v-icon
slot="activator"
color="primary"
dark
>home</v-icon>
<span>Tooltip</span>
</v-tooltip>
</span>
</v-text-field>
Any ideas?
Thanks.
Since v1.1 we can use append (and prepend) slots for this:
<v-text-field v-model="url" label="URL">
<v-tooltip slot="append" bottom>
<v-icon slot="activator" color="primary" dark>home</v-icon>
<span>Tooltip</span>
</v-tooltip>
</v-text-field>
Codepen
In vuetify version 2.0.7 I am using below code. It works perfectly.
<v-tooltip bottom>
<template #activator="{ on }">
<v-icon color="red" class="mr-1" v-on="on">fab fa-youtube</v-icon>
</template>
<span>Tooltip</span>
</v-tooltip>
displaying tooltip when hovering over the icon inside v-text-field
<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">
<div id="app">
<v-app>
<v-content>
<v-container>
<v-text-field v-model="url" label="URL">
<v-tooltip slot="append">
<template v-slot:activator="{ on }">
<v-icon v-on="on" color="primary" dark>
mdi-home
</v-icon>
</template>
<span>Tooltip</span>
</v-tooltip>
</v-text-field>
</v-container>
</v-content>
</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>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
url: 'https://stackoverflow.com/'
}
})
</script>
Related
In vuetify, <v-alert /> component has a text variant.
I'd like to apply it to my v-expansion-panel component, how can I do that?
<v-alert type="warning" text>
My alert info
</v-alert>
<v-expansion-panels >
<v-expansion-panel>
<v-expansion-panel-header color="warning" text>
<v-icon>mdi-alert</v-icon>
My expansion panel info
</v-expansion-panel-header>
<v-expansion-panel-content color="warning" text>
Content
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
You can use background and text variant for styling within your application through a class, e.g. <div class="red"> or <span class="red--text">
refrence: Vuetify classes
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>
<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 id="inspire">
<v-app>
<v-container>
<v-card elevation="1">
<v-expansion-panels >
<v-expansion-panel>
<v-expansion-panel-header class="orange lighten-5 orange--text" text>
<v-icon class="orange lighten-5 orange--text">mdi-alert</v-icon>
My expansion panel info
</v-expansion-panel-header>
<v-expansion-panel-content class="orange lighten-5 orange--text" text>
Content
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-card>
</v-container>
</v-app>
</div>
</div>
I'm using vuetify and have this:
<v-container
class="d-flex justify-center mb-6"
:color="$vuetify.theme.dark ? 'grey darken-3' : 'grey lighten-4'"
flat
tile
>
<v-row justify="center">
<v-col>
<h1>This is an about page</h1>
</v-col>
</v-row>
<v-row justify="center">
<v-col>
<p>
The logo is licensed with the
<a href="https://creativecommons.org/licenses/by-nc/3.0/" target="_blank">
Creative Commons License</a
>
and is provided by
<a href="https://www.iconfinder.com/laurareen/" target="_blank">
iconfinder</a
>
</p>
</v-col>
</v-row>
</v-container>
It renders like this:
How can I make this render 2 rows instead???
I tried adding sm="12" to each column but same thing.
to have a better understanding about vuetify's grid system you can read the doc here.
but in short according to the doc:
v-container provides the ability to center and horizontally pad your site’s contents.
you don't need to set class="d-flex justify-center" on this element.
also according to v-container API page, this component does not accept flat and tile as prop.
remove these props and classes and you should be good.
check the demo below:
Vue.config.productionTip = 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/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-main>
<v-container>
<v-row justify="center">
<v-col>
<h1>This is an about page</h1>
</v-col>
</v-row>
<v-row justify="center">
<v-col>
<p>
The logo is licensed with the
<a href="https://creativecommons.org/licenses/by-nc/3.0/" target="_blank">
Creative Commons License</a>
and is provided by
<a href="https://www.iconfinder.com/laurareen/" target="_blank">
iconfinder</a>
</p>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</div>
Why do I have such a big distance between my select box and it's selectable content ?
I'm using Vuetify in VueJS component in Laravel 7.
<template>
<v-app class="container">
<v-data-table
hide-default-header
hide-default-footer
:headers="headers"
:items="items"
:items-per-page="filter.items_per_page"
#click:row="getData"
no-data-text="No data."
dense
style="background: transparent"
>
<template
v-slot:footer
v-if="items.length"
>
<v-row no-gutters>
<v-col cols="2">
<v-select
:items=[10,50,100]
v-model="filter.items_per_page"
#change="onPageChange(1)"
label="Rows per page"
outlined
dense
></v-select>
</v-col>
</v-row>
</template>
</v-data-table>
</v-app>
</template>
=== EDIT ===
Vuetify variables are loaded as below:
resources/sass/app.scss
#import '~vuetify/dist/vuetify.min.css';
#import '~#mdi/font/css/materialdesignicons.min.css';
I use Vuetify and the "secondary" color doesn't show, as the "github" icon.
Here is my code:
<div class="text-center">
<v-bottom-sheet v-model="aPropos" inset>
<template v-slot:activator="{ on: sheet }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn
class="mx-2"
fab
dark
small
v-on="{ ...tooltip, ...sheet }"
color="secondary">
<v-icon dark>mdi-help-circle-outline</v-icon>
</v-btn>
</template>
<span>À propos</span>
</v-tooltip>
</template>
<v-sheet class="text-center">
<div class="my-3">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="https://www.facebook.com/xxx" target="_blank" class="mx-2" color="primary" fab x-small dark v-on="on">
<v-icon>mdi-facebook</v-icon>
</v-btn>
</template>
<span>Facebook</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="https://twitter.com/xxx" target="_blank" class="mx-2" color="primary" fab x-small dark v-on="on">
<v-icon>mdi-twitter</v-icon>
</v-btn>
</template>
<span>Twitter</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="https://www.linkedin.com/in/xxx" target="_blank" class="mx-2" color="primary" fab x-small dark v-on="on">
<v-icon>mdi-linkedin</v-icon>
</v-btn>
</template>
<span>LinkedIn</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="mailto:xxx" class="mx-2" color="secondary" fab x-small dark v-on="on">
<v-icon>mdi-email</v-icon>
</v-btn>
</template>
<span>Courriel</span>
</v-tooltip>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn href="http://xxx" target="_blank" class="mx-2" color="orange" fab x-small dark v-on="on">
<v-icon>mdi-firefox</v-icon>
</v-btn>
</template>
<span>Site internet</span>
</v-tooltip>
</div>
<div class="my-3">Licence</div>
<div class="my-3">
<v-btn href="https://github.com/xxx" target="_blank" class="ma-2" tile outlined color="primary">
<v-icon left>mdi-github</v-icon> Page GitHub du projet
</v-btn>
</div>
<v-btn
class="mt-6"
text
color="error"
#click="aPropos = !aPropos"
>Fermer</v-btn>
</v-sheet>
</v-bottom-sheet>
</div>
And here is the result:
The "email" button should be light blue and the logo next to "Page GitHub" should be the GitHub logo, not a striked telephone.
I precise, because I already searched for similar questions, that I use "v-app" at the top of my app, to wrap it all (all the other features display correctly).
I use the last version of VueJS and Vuetify (everytime I build I fetch the last version).
If anybody has a clue why I have this result, it would be great. Thanks in advance.
Actually running npm install #mdi/font --save-dev solves the "GitHub" icon problem.
The color problem wasn't a problem, surprisingly it's the color they've chosen to be secondary.
I included Vuetify 2(latest) in my Vue project. I am trying to do some grids with cards inside of a container and it does apply container fluid behavior without including fluid.
Here is my App.vue
<template>
<v-app>
<v-app-bar app>
<v-toolbar-title class="headline text-uppercase">
<span>Vuetify</span>
<span class="font-weight-light">MATERIAL DESIGN</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn
text
href="https://github.com/vuetifyjs/vuetify/releases/latest"
target="_blank"
>
<span class="mr-2">Latest Release</span>
</v-btn>
</v-app-bar>
<v-content>
<v-layout>
<v-container videos-content grid-list-md >
<v-layout wrap>
<v-flex v-for="video in videos" :key="video.id" xs12 sm6 md3>
<v-card max-width="344" class="mx-auto">
<v-card-title>{{video.title}}</v-card-title>
<v-card-text>{{video.description}}</v-card-text>
<v-card-actions>
<a target="_blank" :href="video.url">open in Youtube</a>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-layout>
</v-content>
</v-app>
</template>
In my opinion, the correct structure of vuetify layout is v-container >> v-layout >> v-flex
So maybe remove v-layout tag defined outside of v-container?
Though not quite sure what you meant by 'fluid behavior'...
It seems to be working fine, you just need to follow standard structure from vuetify documentation. I made a pen for you
<div id="app">
<v-app>
<template>
<v-toolbar-title class="headline text-uppercase">
<span>Vuetify</span>
<span class="font-weight-light">MATERIAL DESIGN</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn>
<span class="mr-2">Latest Release</span>
</v-btn>
<v-container grid-list-md >
<v-layout wrap>
<v-flex xs12 sm6 md3>
<v-card max-width="344" class="mx-auto">
<v-card-title></v-card-title>
<v-card-text></v-card-text>
<v-card-actions>
<a>open in Youtube</a>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
</div>