this is the first time i post here. I have tried to do this for 2 days but it has been very difficult for me. I am using Vuetify and v-tabs component to show some stuff like this:
As you can see the background's card is black and i want to change it to transparent so the background html which is a linear gradient between blue/purple/black shows...
I have tried adding background-color: transparent to v-tab-item just like i did above in the v-tab "Material Clase/Material Complementario" but i don't know why it isn't applied to the v-tab-item below
This is my code:
<template>
<v-app style="background-color: rgba(30, 30, 30, 0.3);">
<v-tabs fixed-tabs background-color="transparent" color="green" slider-color="purple">
<v-tab>Material Clases</v-tab>
<v-tab-item >
<div class="mb-5 p-3">
<h3 class="mb-3">Guias de clases</h3>
<div class="row">
<div
v-for="(item, i) in items"
:key="i"
class="col-sm-12 col-md-6 col-lg-4"
>
<v-card
class="mx-auto background-tr borde-claro"
max-width="1000"
elevation="15"
outlined
>
<v-list-item three-line >
<v-list-item-content>
<div class="text-overline mb-4 tx-white">
{{ item.title }}
</div>
<v-list-item-title class="text-h5 mb-1 tx-white">
Clase: {{ item.clase }}
</v-list-item-title>
<v-list-item-subtitle class="tx-white">
Descripcion: {{ item.descripcion }}
</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar
tile
size="50"
color="grey"
></v-list-item-avatar>
</v-list-item>
<v-card-actions>
<v-btn class="tx-white borde-claro centrar" outlined rounded text >
Descargar
</v-btn>
</v-card-actions>
</v-card>
</div>
</div>
</div>
</v-tab-item>
</v-app>
</template>
As you can see i give to v-tabs the background-color to transparent and it works because it shows the background from the root (linear gradient colors) but if i give a background-color transparent to v-tab-item it doesn't work because i keep seeing the BLACK background like the screenshot i uploaded...
Thanks in advance !!
in vuetify you can't change the v-tab-item background-color because its possible to change it in v-tab-items element. This is what I did:
<v-tabs v-model="userProfileTabs" :show-arrows="false" color="#E30E4F" background-color="transparent" dark>
<v-tab to="#tabs-1"><b>TAB 1</b></v-tab>
<v-tab to="#tabs-2"><b>TAB 2</b></v-tab>
</v-tabs>
<v-tabs-items v-model="userProfileTabs" id="custom-tab-items">
<v-tab-item value="tabs-1">
</v-tab-item>
<v-tab-item value="tabs-2">
</v-tab-item>
</v-tabs-items>
I assigned and id value "custom-tab-items" to the element. Then, I customize the background color with css:
<style>
#custom-tab-items {
background-color: transparent !important;
}
</style>
use this style for dark and light theme to change all style of v-tabs:
.theme--dark.v-tabs-items {
background-color: transparent !important;
}
.theme--light.v-tabs-items {
background-color: transparent !important;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.