I have the next carousel made with vuetify and I need to move both arrows up, in order to do that I need to have a top:0 in both v-window__next and v-window__prev class but I don't know how to give the property to the component
This is a piece of the code
<v-carousel
hide-delimiters
height="100%"
>
<v-carousel-item
v-for="(item,i) in yearsMonthsUsed"
:key="i"
>
<v-row
class="ma-0"
align="center"
justify="center"
>
<v-col
cols="12"
sm="12"
align="center"
justify="center"
>
<div class="text-h6">
{{ item.annio }}
</div>
</v-col>
<v-col
cols="12"
sm="1"
v-for="mes in meses"
:key="mes.mes"
>
<v-btn
fab
depressed
x-small
:color="pickColor(item.annio,mes.cod)"
:class="{'disable-events': true}"
>
<v-icon>
{{ mdiCalendar }}
</v-icon>
</v-btn>
{{ mes.mes.substr(0, 3) }}
</v-col>
</v-row>
</v-carousel-item>
</v-carousel>
I tried adding Slots inside v-carousel like this
<template v-slot:next="{ on, attrs }" :class="myClas" />
<style lang="scss" scoped>
.myClas {
top: 0;
}
</style>
but it didn't work
You can assign a class to v-carousel and set the style of the arrows from there.
<v-carousel class="myCarousel"><!-- content --></v-carousel>
<style>
.myCarousel .v-window__prev, .myCarousel .v-window__next {
top: 0;
}
</style>
You can enter like this onto or into style.scss.
.v-window__prev{
position: absolute;
left:-95px;
top: 0px;
}
Related
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:
EXAMPLE
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;
}
Ok so I created a grid with cards inside that I want to dynamically href and it's working but it's giving me an "undefined" URL path when clicking on any of the cards that showed on the page.
Ive tried using the <template v-slot:item.years="{ item }"> way but its clashing with the <v-hover v-slot:default="{ hover }">
Any help would be appreciated
<template>
<v-container>
<v-row v-for="n in 1" :key="n" no-gutters class="pa-7">
<v-col v-for="n in 6" :key="n" :cols="n === 1 ? 4 : 4">
<v-hover v-slot:default="{ hover }">
## here I am trying to dynamically href the cards so that I can assign URLs outside of the website to them
<a class="text-decoration-none" target="blank" :href="`${years.href}`">
<v-card flat tile class="d-flex">
<v-img
:src="`https://picsum.photos/500/500?image=${n * 5 + 10}`"
:lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
class="grey lighten-5"
:aspect-ratio="12/8.5"
>
<v-expand-transition>
<div
v-if="hover"
class="d-flex transition-fast-in-fast-out black darken-2 v-card--reveal display-3 white--text"
style="height: 100%;"
>View Card</div>
</v-expand-transition>
<template v-slot:placeholder>
<v-row class="fill-height ma-0" align="center" justify="center">
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
</v-row>
</template>
</v-img>
</v-card>
</a>
</v-hover>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data: () => ({
years: [
{
href: "https://www.google.com",
text: "me",
},
{
text: "me",
href: "https://www.bing.com",
},
{
text: "twice",
href: "https://www.facebook.com",
},
],
}),
};
</script>
<style>
.v-card--reveal {
align-items: center;
bottom: 0;
justify-content: center;
opacity: 0.5;
position: absolute;
width: 100%;
}
</style>
You attempted to access years's href property here: :href="years.href", which gives you undefined since years is an array.
Also, you can properly layout your data to something like this:
years: [
{
text: "me",
href: "https://www.google.com",
src: "https://picsum.photos/500/500?image=1",
lazySrc: "https://picsum.photos/10/6?image=1"
},
...
]
and use it like on your html like this:
<v-row no-gutters class="pa-7">
<v-col v-for="(year, i) in years" :key="i" :cols="i === 1 ? 4 : 4">
<v-hover v-slot:default="{ hover }">
<a class="text-decoration-none" target="blank" :href="`${year.href}`">
<v-card flat tile class="d-flex">
<v-img
:src="year.src"
:lazy-src="year.lazySrc"
class="grey lighten-5"
:aspect-ratio="12/8.5"
>
<v-expand-transition>
<div
v-if="hover"
class="d-flex transition-fast-in-fast-out black darken-2 v-card--reveal display-3 white--text"
style="height: 100%;"
>View Card</div>
</v-expand-transition>
<template v-slot:placeholder>
<v-row class="fill-height ma-0" align="center" justify="center">
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
</v-row>
</template>
</v-img>
</v-card>
</a>
</v-hover>
</v-col>
</v-row>
Here is a sample demo.
Sorry but undefined is what you're going to get. years is an array and you're trying to access the href property of that object in the array. So in order to get the href property, you will need to iterate through the array to access those properties of the object using a v-for.
i've been stuck for hours just to align an item vertically and horizontally in v-card. this image below is what i currently have, i just have to align the item vertically but i dont know how. can anyone help me? thanks in advance
My code :
<div class="pt-3">
<v-card class="pa-3">
<v-row align="center" justify="center" v-bind:style="{ height: deviceHeight * 0.6 + 'px',}">
<v-col class="fill-height" height="500">
<v-card class="text-center grey" height="100%">
<div align="center" justify="center">
<v-icon>mdi-camera</v-icon>
<h3>Upload</h3>
</div>
</v-card>
</v-col>
</v-row>
</v-card>
</div>
computed: {
deviceHeight(){
return this.$vuetify.breakpoint.height;
},
deviceWidth(){
return this.$vuetify.breakpoint.width;
},
},
The align and justify props are used for some Vuetify components, but they won't work on a native HTML div. Instead use the appropriate classes on the v-card...
<v-card class="text-center grey d-flex flex-column align-center justify-center" height="100%">
<div>
<v-icon>mdi-camera</v-icon>
<h3>Upload</h3>
</div>
</v-card>
Demo
v-row behaves as the flex-container and all the props like justify or align or any flex container property will work to it only. Just change ur div to v-row. Althought there is one problem with that is v-row have some negative margin which you can rid off by using no-gutters
<div class="pt-3">
<v-card class="pa-3">
<v-row align="center" justify="center" v-bind:style="{ height: deviceHeight * 0.6 + 'px',}">
<v-col class="fill-height" height="500">
<v-card class="text-center grey" height="100%">
<v-row no-gutters align="center" justify="center">
<v-icon>mdi-camera</v-icon>
<h3>Upload</h3>
</div>
</v-card>
</v-col>
</v-row>
</v-card>
</div>
Neither establish a space immediately before or within a link nor any kind of link works fine while using links within the label attribute - It only checks the box. Using mousewheel works. How to target a new tab with simple leftclick?
<v-checkbox
v-model="checkbox"
:rules="[v => !!v || 'Its required!']"
label=""
required
>
<template v-slot:label>
URL_A
<v-btn href="/#/URL" target="_blank" > URL_B </v-btn>
<navigation-link url="/#/URL" target="_blank">
URL_C
</navigation-link>
</template>
</v-checkbox>
This will not work. When you associate a <label> element with a checkbox <input> (which is what Vuetify is doing behind the scenes), clicking on the label is supposed to toggle the value of the checkbox. It cannot also be a link because then the click action would be ambiguous. If someone clicks the link, should it open the link or toggle the checkbox? It appears that toggling the checkbox wins in this case.
If you need link text to go next to your checkbox, it has to be its own separate element. You can use CSS to get the two elements to line up:
<v-row>
<v-col cols="12">
<v-checkbox
v-model="checkbox1"
color="primary"
:rules="[v => !!v || 'Its required!']"
required
>
<template #label>
This link cannot be clicked
</template>
</v-checkbox>
</v-col>
<v-col cols="12">
<v-checkbox
v-model="checkbox1"
class="pa-0 ma-0"
color="primary"
:rules="[v => !!v || 'Its required!']"
required
style="float: left;"
></v-checkbox>
This link CAN be clicked
</v-col>
</v-row>
There's a working demo in this codeply.
Just use #click.stop on the link:
<v-checkbox v-model="checkbox">
<template v-slot:label>
<a href="/#/URL" target="_blank" #click.stop> URL_A </a>
</template>
</v-checkbox>
It´s done by using a modal:
<v-container v-if="showModal" class="modal-mask white--text">
<transition name="modal">
<v-container >
<v-container class="modal-wrapper">
<v-container class="modal-dialog">
<v-container class="modal-content">
<v-container class="modal-header">
<h4 class="modal-title">Title</h4>
</v-container>
<v-container class="modal-body">
Lorem ipsum
</v-container>
<v-container two-line>
<v-btn color="primary" class="close" #click="showModal=false">
<span>Close</span>
</v-btn>
</v-container>
</v-container>
</v-container>
</v-container>
</v-container>
</transition>
</v-container>
<script>
export default {
data: () => {
return {
showModal: false
}
}
}
</script>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0%;
left: -10px;
height: 100%;
max-width: none;
background-color: rgba(0, 0, 0, .8);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: top;
}
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 500px;
overflow-y: auto;
}
</style>
Good day,
This way I have the template in one component.
<template>
<v-card fluid>
<div class="text-xs-center">
<v-btn outline small fab color="indigo" #click="abrirmodalBusqueda()">
<v-icon>search</v-icon>
</v-btn>
</div>
<div id="map">
<l-map style="height: 500px; width: 100%" :zoom="zoom" :center="center" #update:center="centerUpdate">
<l-tile-layer :url="url"></l-tile-layer>
<l-marker :lat-lng="marker" >
<l-popup>Estoy en estas coordenadas asadsad {{latitud}}</l-popup>
</l-marker>
<l-marker v-for="marker in markers" :lat-lng="marker">
<l-popup>Estoy en estas coordenadas asadsad {{marker.lat}}
<v-flex xs12 sm4 text-xs-center>
<div>
<v-btn small color="primary" #click="dialogParqueos = true">Seleccionar</v-btn>
</div>
</v-flex>
</l-popup>
</l-marker>
</l-map>
</div>
</v-card>
</template>
When using the property of height in px and not in% I can already visualize the map l-map style = "height: 500px" since if I use 100% the map can not be seen. The problem that when making use of v-navigation-drawer the map is assembled in the following way:
As you notice, it overlaps the left panel. For the map I am using the Vue2Leaflet library. Thank you in advance.
SOLUCION:
<v-container>
<v-card
class="pa-3"
flat
height="550px"
width="100%"
>
<l-map style="height: 100%; width: 100%; position: sticky !important;" :zoom="zoom" :center="center">
<l-tile-layer :url="url"></l-tile-layer>
<l-marker :lat-lng="markerLatLng" ></l-marker>
</l-map>
</v-card>
</v-container>
add position:sticky !important; in the style.