I'm just learning Vue.js & Vuetify and I can't change the size of my icon. Can anyone help me, please?
<v-text-field
prepend-inner-icon="mdi-magnify"
>
</v-text-field>
You can put anything you want in that "prepend-inner" emplacement by using slot ( it's an advanced feature in vue)
<v-text-field label="Prepend inner">
<template v-slot:prepend-inner>
<v-icon x-large>mdi-magnify</v-icon>
</template>
</v-text-field>
Related
I'm working with Vue.js 2 and Vuetify 2.2.28 (I've already tried to upgrade in Vuetify 2.6 but I have the same issue), I'm trying to apply the "attach" property to the v-menu of a v-date-picker, to keep the calendar attach to his input when I scroll the dialog.
The attach property works on my datepickers outside the dialog, and it also work on my v-select inside the dialog, but I don't understand why it doesn't work with my datepickers inside the dialog :
<v-col md="8">
<v-menu
ref="menuDateEnd"
v-model="addEndDateTrigger"
:close-on-content-click="false"
transition="scale-transition"
max-width="290"
attach
>
<template v-slot:activator="{ on }">
<v-text-field
:value="addUserForm.endDate | date"
label="Date de fin"
readonly
color="ilgprimary"
v-on="on"
hide-details
clearable
#click:clear="clearAddDateEnd"
/>
</template>
<v-date-picker v-model="addUserForm.endDate" scrollable locale="fr" color="ilgprimary" header-color="ilgsecondary" #change="checkEndDate()">
</v-date-picker>
</v-menu>
</v-col>
I've also tried to put an ID to my v-col and attach the datepicker to it doing attach="#my-col-id" but it doesn't work too.
Someone know how to fix this please ?
I'm trying to make my image draggable in another application like google or another site would do. For example if I drop an image from google to a Word document, it will copy the link of it and some web applications would show the image instead; the behavior depends on the app.
But the problem is my v-img doesn't even print the link, it just does nothing.
Here is my code:
<v-card v-if="chunk.length >= i">
<template v-if="activeTab === 'Comments'">
<v-card-title class="justify-center">{{ chunk[i-1] }}</v-card-title>
</template>
<template v-else-if="activeTab === 'Images'">
<v-img
:src="getImgUrl(chunk[i-1])"
width="500"
contain
draggable="true"
/>
</template>
<v-card-actions>
<v-col>
<v-btn
color="#138ed3"
block
dark
>
Share
</v-btn>
</v-col>
<v-col>
<v-btn
color="#ffcd00"
block
dark
>
Save
</v-btn>
</v-col>
</v-card-actions>
</v-card>
As you can see I already tried the "draggable" option but it doesn't help.
Is there something I'm missing ?
The problem with v-img is that it renders the image as background (using the CSS style background-image) rather than as an IMG tag. Apparently, CSS backgrounds do not support dragging.
I want to add a v-tooltip to the v-btn I'm using to trigger the datepicker for a my charting application. Here is code that is working, before attempting to integrate the tooltip.
<v-menu ref="menu" v-model="menu"
:close-on-content-click="true"
:return-value.sync="date"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-btn v-on="on"
:style="{left: '50%', transform:'translateX(-50%)'}"
light
icon
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
</template>
<v-date-picker
v-model="date"
no-title
scrollable
>
</v-date-picker>
</v-menu>
With the above, I click the button, I get the datepicker, all is good. I have tried a bunch of different ways to add a v-tooltip, e.g. wrapping the whole block, wrapping just the template and wrapping just the button. Wherever I place the tooltip code, it breaks the whole setup in that either the button doesn't show or the click on it isn't processed.
Buttons being ideal for tooltips, to reveal their functionality without having to click to find out, this seems like a reasonable thing to do. It is easy to use v-btn to trigger lists, but I find very few examples of people using buttons to display datepickers, even though lots of people are asking questions online about it. I'm hoping there is a technique for tooltips that can be used with a variety of pickers actuated from .
Any ideas?
Fixed it for you, try now:
Demo: https://codepen.io/aQW5z9fe/pen/vYNdJwO?editors=1010
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on: menu }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn
v-on="{ ...tooltip, ...menu }"
:style="{left: '50%', transform:'translateX(-50%)'}"
light
icon
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
</template>
<span>Tooltip</span>
</v-tooltip>
</template>
<v-date-picker
v-model="date"
no-title
scrollable
>
</v-date-picker>
</v-menu>
I want to customize the colors of Vuetify. So I am using slots of various components to do it. While I am able to achieve custom color for checkbox in header using header.data-table-select slot. The color of checkbox when only some of the rows are selected(but not all) is still grey. Can anyone suggest what I can do to customize its color.
Link to codesanbox
Problem screenshot
Partially working
When value is false, v-simple-checkbox doesn't apply color.
but props.value become true only when all values are selected.
I think this way is better.
<template v-slot:[`header.data-table-select`]="{ props, on }">
<v-simple-checkbox
:value="props.value || props.indeterminate"
v-on="on"
:indeterminate="props.indeterminate"
color="primary"
/>
</template>
I fixed it this way.
<template v-slot:header.data-table-select="{ props, on }">
<v-simple-checkbox
color="primary"
v-if="props.indeterminate"
v-ripple
v-bind="props"
:value="props.indeterminate"
v-on="on"
></v-simple-checkbox>
<v-simple-checkbox
color="primary"
v-if="!props.indeterminate"
v-ripple
v-bind="props"
v-on="on"
></v-simple-checkbox>
</template>
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.