I've been trying to change v-select text colour for the label and items but can't find the prop to do that, I can change the background-color but not the label or text items inside the v-select. Sample code below
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-row align="center">
<v-col
class="d-flex"
cols="12"
sm="6"
>
<v-select
:items="items"
label="Standard"
background-color="#000000"
color="#ffffff"
></v-select>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
You could use item slot to customize the label rendering :
<v-select :items="items" label="Standard" background-color="#000000" color="#ffffff">
<template #item="{item}">
<span style="color:white; background:blue">{{item.name}}<span>
</template>
</v-select>
Related
I am trying to use Vuetify components to achieve an effect on some v-img thumbnails and I am failing to do so. My images are setup as follows:
<v-row class="fill-height pa-5"
align-content="center"
justify="center">
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc1"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc2"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc3"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc4"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
</v-row>
I have these aligned horizontally in a row with columns and I am trying to have it so that when i over over each v-img they dim separately and a white solid v-button will appear in the center which I will assign a link/text too. What is the best way to do this as the hover component seems to lack dimming properties.
I don't think you are going to get this straight out the box but you don't need to do much more to get the result you want.
Out-the-box...
Use the Hover component to trigger an event and use the slot (boolean) value to toggle CSS class(es).
Template
<v-hover v-slot="{ hover }">
<v-card :class="{ 'on-hover': hover }">
// ...
</v-card>
</v-hover>
Custom...
Then add some scoped styles. The following is just a quick example but you can style however you like.
Styles
.v-image {
transition: filter .4s ease-in-out;
}
.v-card:hover .v-image {
filter: brightness(25%);
}
Example: https://codepen.io/alexpetergill/pen/NWBadjV
Docs: https://vuetifyjs.com/en/components/hover/
API: https://vuetifyjs.com/en/api/v-hover/#slots
** Here I have v-select element it is not showing for the first element, Vuetify v-select element. Please help **
<template>
<v-app id="inspire">
<v-container align="center">
<v-row>
<v-col cols="12" sm="3" class="categ">
<v-select
cols="12"
sm="3"
class=""
#change="setD"
:items="categories"
v-model="content.cat"
outlined
label="Select Category"
></v-select>
</v-col>
<v-col cols="12" sm="3" class="key">
<v-combobox
#change="setD"
outlined
label="Input Key"
v-model="content.key"
></v-combobox>
</v-col>
<v-row
class="childElements"
v-for="(find, index) in content.data"
:key="index"
>
<v-col cols="12" sm="6" class="key">
<v-select
#change="setD"
:items="languages"
v-model="find.lang"
outlined
label="Select Language"
></v-select>
</v-col>
<v-col xs4 class="childTwo">
<v-combobox
#change="setD"
v-model="find.cont"
outlined
class=""
label="Input Content"
></v-combobox>
</v-col>
</v-row>
</v-row>
<v-row justify="center" class="buttonRow">
<v-btn color="#96CEB4" #click="addFind" class="btnv"
><v-icon class="iconel">mdi-plus</v-icon>
</v-btn>
</v-row>
</v-container>
</v-app>
</template>
** Here I have v-select element it is not showing for the first element, Vuetify v-select element. Is there any way to fix it please share your thoughts and answers I appreciate so much**
** Here I have v-select element it is not showing for the first element, Vuetify v-select element. Is there any way to fix it please share your thoughts and answers I appreciate so much**
You use props which shouldn't be here.
<v-select
#change="setD"
:items="categories"
v-model="content.cat"
outlined
label="Select Category"/>
Are you sure categories and content exist in data()?
I'm trying to figure out how to horizontally align two v-col, one of this columns has a v-combobox:
<div id="app">
<v-app>
<v-container class="indigo lighten-5">
<v-row no-gutters>
<v-col cols="2">{{ o.id }} </v-col>
<v-col cols="10">
<v-combobox v-model="o.selected" :items="values" dense class="ml-auto"></v-combobox>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
Here there's the codepen
How can I align those two columns?
Add align prop to the row component with center as value :
<v-row no-gutters align="center">
In order to do that, you can add class="d-flex align-center" to the v-row
<div id="app">
<v-app>
<v-container class="indigo lighten-5">
<v-row no-gutters class="d-flex align-center">
<v-col cols="2">{{ o.id }} </v-col>
<v-col cols="10">
<v-combobox v-model="o.selected" :items="values" dense class="ml-auto"></v-combobox>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
Here's the codepen
I use Vuetify for development a dashboard. I need all cards whit a specific height, in this case 450px. I fill the v-data-table from axios petition, when the v-data-table fill whit data, it break the height of v-card.
See the v-card Tabla Tarificador carteras
this is my v-card component code:
<v-row>
<v-col cols="12" md="7">
<v-card height="450">
<v-card-text>
<v-row>
<v-col cols="12">
<v-data-table
:fixed-header="true"
:headers="tablas.tarificadorCarteras.cabeceras"
:items="tablas.tarificadorCarteras.datos"
>
<template v-slot:[`item.cartera`]="{ item }">
<a #click="obtenerGraficoTarificadorCartera(item.cartera)" class="text-capitalize">{{ item.cartera }}</a>
</template>
<template v-slot:[`item.minutos_entel`]="{ item }">
{{ new Intl.NumberFormat('es-CL').format(item.minutos_entel) }}
</template>
<template v-slot:[`item.minutos_movistar`]="{ item }">
{{ new Intl.NumberFormat('es-CL').format(item.minutos_movistar) }}
</template>
<template v-slot:[`item.minutos_pacifico`]="{ item }">
{{ new Intl.NumberFormat('es-CL').format(item.minutos_pacifico) }}
</template>
</v-data-table>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
</v-row>
I need see the v-data-table inside the v-card scrollable and responsive. I try to make it, but can't
Set max-height="450" style="overflow-y:auto" to v-col
My codepen like this : https://codepen.io/positivethinking639/pen/mddejJN
my code like this :
<div id="app">
<v-app>
<v-content>
<v-container>
<v-dialog
ref="dialogTest"
v-model="modalTest"
:return-value.sync="dateTest"
persistent
>
<template v-slot:activator="{ on }">
<v-btn color="success" dark v-on="on">call date</v-btn>
</template>
<div class="text-center title">Select a Date & Time</div>
<v-row justify="center">
<v-date-picker v-model="dateTest" scrollable :allowed-dates="allowedDates">
<div class="flex-grow-1"></div>
<v-btn text color="primary" #click="modalTest = false">Cancel</v-btn>
<v-btn text color="primary" #click="saveData">OK</v-btn>
</v-date-picker>
<v-slide-y-transition>
<v-col cols=2 v-show="dateTest !== null">
<template v-for="allowedTime in allowedTimes">
<v-btn
#click="setTime(allowedTime)"
class="my-2"
:outlined="allowedTime !== time"
block
x-large
color="primary"
>{{ allowedTime }}</v-btn>
</template>
</v-col>
</v-slide-y-transition>
</row>
</v-dialog>
{{dateTest}}
</v-container>
</v-content>
</v-app>
</div>
If I click button "call date", it will call datepicker. If I select a date, I want it call a method
How can i do it?
You can use #change="myMethod" or #click:date="myMethod" on v-date-picker.
Read vuetify date-picker documentation (events section) for more information.