I am new to vuejs and i started with vuetifyjs. I am having problems with their layout.What i want to do is: i have four columns for example they have 4 width in the 12 layout grid. On same break point they will go one under another instead to be in same line
<template>
<v-container class="grey lighten-5">
<v-row class="mb-6" no-gutters>
<v-col v-for="n in 4" :key="n" cols="md-3">
<v-card class="pa-2" tile outlined>
col
</v-card>
</v-col>
</v-row>
<v-container>
</template>
But they have always same width:
I need something like in bootstrap:
col-md-4
they will have 4 width until 768px,below that the columns will be one under another.
Is this possible with vuetifyjs ?
The cols prop is to set the default number of columns. Then use on of the breakpoint props (sm, md, lg, ...) to set the number of columns at that breakpoint.
Therefore, for full-width columns on mobile, and 4 columns on md and larger:
<v-container class="grey lighten-5">
<v-row class="mb-6" no-gutters>
<v-col v-for="n in 4" :key="n" cols="12" md="3">
<v-card class="pa-2" tile outlined> col </v-card>
</v-col>
</v-row>
<v-container>
https://codeply.com/p/jhYKePIxal
Also note that Vuetify's breakpoints are different than Bootstrap's breakpoints. "Medium" is 960px > < 1264px*, and there isn't a 768px breakpoint.
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
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'm trying to create a web site (I'm a beginer in Vuetify ) , and I want to create a button at the extremity of the page(last row even in the center ,last column) , but this buttun still in the begin of the page , Here is my code :
<template>
<div>
<v-toolbar
dark
prominent
src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Workers</v-toolbar-title>
</v-toolbar>
<v-row align="center">
<v-col cols="12" sm="6">
<v-btn x-large color="pink" >START</v-btn>
</v-col>
</v-row>
<v-navigation-drawer app
v-model="drawer"
.
.
.
</v-navigation-drawer>
</div>
</template>
PS: the collor of the button also doesn't change
Thank you !
I think this should do the trick.
<v-row class="align-center">
<v-col cols="12" sm="6" class="text-right">
<v-btn x-large color="pink" >START</v-btn>
</v-col>
</v-row>
When using v-row you can manipulate horizontal alignment using justify and vertical alignment using align like the official document points out.
For your case to align the button at the end:
<v-row justify="end">
<v-btn>Button</v-btn>
</v-row>
Hello!
I recently started using Vuetify 2.0 and I find myself stuck on something I was able to achieve really easy on Vuetify 1.5. I feel like I'm missing something pretty obvious.
Please help me achieve this result from this Vuetify 1.5 template:
<div id="app">
<v-app>
<v-content>
<v-container fluid fill-height class="grey darken-4">
<v-layout fill-height column wrap>
<v-flex>
<v-card height="100%">
<v-card-title>I fill the whole available vertical space.</v-card-title>
</v-card>
</v-flex>
<v-flex shrink>
<v-card>
<v-card-title>I'm shrinked to content vertically.</v-card-title>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
https://codepen.io/uatar/pen/rNaxoVV
column is no longer specific to the grid, it's now a generic flex-column class instead
shrink should be replaced with flex-grow-0 which prevents the element from growing but will not allow it to shrink below its original size
Other than that everything works pretty similarly:
<v-container fluid class="fill-height grey darken-4">
<v-row dense class="fill-height flex-column">
<v-col>
<v-card height="100%">
<v-card-title>I fill the whole available vertical space.</v-card-title>
</v-card>
</v-col>
<v-col class="flex-grow-0">
<v-card>
<v-card-title>I'm shrinked to content vertically.</v-card-title>
</v-card>
</v-col>
</v-row>
</v-container>
https://codepen.io/kaelwd/pen/abzdMWe?editors=1000
I am developing a team presentation page for an app with VueJs and Vuetify. I would like the picture and description of each member to be next to each other on desktop, but stacked on top of each other on small displays.
I used <v-col> to hold each of the two elements, which gives me what I want on large screens. Is there a canonical way to achieve the stack behaviour on small devices? I am aware of Vuetify breakpoints helpers but don't know how to use them in this case.
Here is the code I used for the components that wraps a person's presentation:
<template>
<v-container>
<v-row class="mb-6">
<v-col cols="2">
<v-img :src="member.elements.picture.value[0].url" height="12em"></v-img>
</v-col>
<v-col cols="8">
<v-container
class="text-justify body-1"
v-html="member.elements.description.value"
></v-container>
</v-col>
</v-row>
</v-container>
</template>
You just need to change the v-col width attribute from cols to multiple attributes lg and sm.
<template>
<v-container>
<v-row class="mb-6">
<v-col lg="2" sm="12">
<v-img :src="member.elements.picture.value[0].url" height="12em"></v-img>
</v-col>
<v-col lg="8" sm="12">
<v-container
class="text-justify body-1"
v-html="member.elements.description.value"
></v-container>
</v-col>
</v-row>
</v-container>
</template>
grid documentation