I'm losing my mind here with Vuetify 2.0, I need to convert the old layout/flex to the new row/col syntax and I can't seem to do it.
I need to convert the following to the new 2.0 syntax:
<v-layout row wrap>
<v-flex xs12 sm4> 1 </v-flex>
<v-flex xs12 sm4> 2 </v-flex>
<v-flex xs12 sm4> 3 </v-flex>
</v-layout>
Which would have the columns wrapped on XS devices and in a line on SM devices.
I've got the following, but how do I 'wrap' them with the breakpoints?
<v-row>
<v-col xs="12" sm="4" >1</v-col>
<v-col xs="12" sm="4" >2</v-col>
<v-col xs="12" sm="4" >3</v-col>
</v-row>
On XS devices, it should be:
1
2
3
Instead, I get them bunched together: 1 2 3
This is annoying me more than it should :(
To make it work, you have to set cols to auto or between 1-12, then adjust your col sizes viewports.
<v-row>
<v-col cols="auto" md="4" sm="12" >1</v-col>
<v-col cols="auto" md="4" sm="12" >2</v-col>
<v-col cols="auto" md="4" sm="12" >3</v-col>
</v-row>
or
<v-row>
<v-col cols="12" md="4" sm="12" >1</v-col>
<v-col cols="12" md="4" sm="12" >2</v-col>
<v-col cols="12" md="4" sm="12" >3</v-col>
</v-row>
I prefer the later.
Related
I would like to set the v-col width with the h1, in the code below, to 100% of the page, how can i do it?
<v-main class="pt-0 black" max-width="auto">
<v-row>
<v-col cols="auto">
<v-img src="#/assets/images/riot-logo.png"></v-img>
</v-col>
<v-col cols="auto">
<v-container class="riot-text">
<h1 class="text-center">Riot Games</h1>
</v-container>
</v-col>
</v-row>
</v-main>
</template>
The columns are adjacent to one another, so you can't make one 100% without setting the other to zero. In order to set the column to width 100%, you will need to place each column in it's own row. I also removed the cols="auto" attribute.
<v-main class="pt-0" max-width="auto">
<v-row>
<v-col cols="auto">
<v-img src="#/assets/images/riot-logo.png"></v-img>
</v-col>
</v-row>
<v-row>
<v-col>
<v-container class="riot-text fluid">
<h1 class="text-center">Riot Games</h1>
</v-container>
</v-col>
</v-row>
</v-main>
can any body help, why in vuetify under v-col always align center ?
i try to make simple paragraph, but why always align center ?
here is my code
<v-container>
<v-row>
<v-col cols="12" md="8">
<p>test paragraph</p>
</v-col>
<v-col cols="12" md="4">
<p>test kedua</p>
</v-col>
</v-row>
</v-container>
for my model, I use a v-select and a v-text field for when a selected value makes v-textfield read-only, but how is this implemented in vuetify?
<template>
<v-container>
<v-row>
<v-col cols="12" sm="3" md="3">
<v-select
:items="['Yes','No']"
label="select"
></v-select>
</v-col>
<v-col cols="12" sm="3" md="3">
<v-text-field
label="ReadOnly"
></v-text-field>
</v-col>
</v-row>
</v-container>
</template>
Store the selected value of the v-select, then control the readonly prop of the v-select based on the selected value. I assume that when you selected "yes", the textfield will be readonly
<v-select
v-model="selected"
:items="['Yes','No']"
label="select"
></v-select>
...
<v-text-field
label="ReadOnly"
:readonly="selected === 'yes'"
></v-text-field>
Here's a sample demo at codesandbox:
I'm currently creating a grid-layout in Vuetify, but I got stuck. I'm making a card-layout containing images. Here is the example:
I've tried it with the following code, but then small cards on the right are not aligned due to the margins.
<v-container>
<v-row class="justify-center">
<v-col cols="6">
<v-hover v-slot:default="{ hover }">
<v-card
to="/pools"
:elevation="hover ? 12 : 2"
:class="{ 'on-hover': hover , 'overwrite-hover' : $vuetify.breakpoint.xsOnly}"
>
<v-img class="white--text" :src="images[0]">
<v-card-title class="white--text align-end fill-height headline">My Pools</v-card-title>
<template v-slot:placeholder>
<v-row class="fill-height" align="center" justify="center">
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
</v-row>
</template>
</v-img>
</v-card>
</v-hover>
</v-col>
<v-col cols="2">
<v-card class="ma-2" light height="50%"></v-card>
<v-card class="ma-2" light height="50%"></v-card>
</v-col>
</v-row>
<v-row class="justify-center">
<v-col cols="8">
<v-card light height="120px"></v-card>
</v-col>
</v-row>
</v-container>
Does anyone have a suggestion, or maybe a similar example?
Thanks in advance!
Luckily you only need to make minor adjustments to the smaller cards on the right. Make use of flex and let flex do its magic :) It's basically telling the cards to grow to the maximum height available without clipping. Then add some margin in between the cards with the helper classes mb and mt.
<v-col cols="2" class="d-flex" style="flex-direction:column">
<v-card class="mb-1 flex-grow-1">
Upper card
</v-card>
<v-card class="mt-1 flex-grow-1">
Lower card
</v-card>
</v-col>
As a codesandbox. Check out the file "layout.vue" for the complete example.
In the document, justify-** and align-** are design for determine where the grid block should be placed, but how can I make the content inside the v-col align to right?
Here is a small example that aligns content to the right inside v-col (in this case a close button):
<v-row>
<v-col align="right">
<v-btn color="error">X</v-btn>
</v-col>
</v-row>
Or with multiple columns:
<v-row>
<v-col cols="9">
<h2>Title</h2>
</v-col>
<v-col cols="3" align="right">
<v-btn color="error">X</v-btn>
</v-col>
</v-row>
So you simply need to add
align="right"
as a parameter at v-col to align content to the right side within a v-col.
Bit late to this. I came here for a solution and ended up RTM. align="right" doesn't work for all components inside v-col. The way to left/right/center align is to use v-spacer. If you want to right align, add a v-spacer to the left of your component inside of v-col. v-col also needs d-flex class.
<v-app>
<v-container>
<v-row>
<v-col cols="8">
</v-col>
<v-col class="d-flex" cols="4">
<v-spacer />
<!-- insert any other content here to right align inside this col -->
</v-col>
</v-row>
</v-container>
<v-app>
You can also add the class .text-right if you're trying to align a button or text
According to the code of the Playground example in Vuetify's Grid System page, you could put an EXTRA v-row inside your v-col, and use justify-** in this newly added v-row. E.g.:
<v-app>
<v-container>
<v-row>
<!-- first column -->
<v-col cols="8">
<!-- the extra row -->
<v-row justify="center">
<p>Your Content</p>
</v-row>
</v-col>
<v-col cols="4">
Second column
</v-col>
</v-row>
</v-container>
<v-app>
Or, if the v-col is the ONLY column in your first-level v-row, you MAY get rid of that, just put your content in the v-row to which you can apply the justify. E.g.:
<v-app>
<v-container>
<v-row justify="center">
<p>Your Content</p>
</v-row>
</v-container>
<v-app>