I'm attempting to show/hide elements of a grid using vuetify, but can't seem to get them to play well with transitions. In the codepen below, I'm trying to hide and show a column smoothly and have the blue section slide in behind. Instead, the red transitions, then the blue snaps in when the element is removed.
<v-layout row>
<transition name="slide-x-transition">
<v-flex v-if="showRed" xs4 style="background-color:red">
</v-flex>
</transition>
<v-flex style="background-color:blue"> <!--Doesn't smoothly fill in-->
<v-btn #click="showRed = !showRed">HIDE/SHOW</v-btn>
</v-flex>
</v-layout>
Likewise, with the white/green, I'm wanting the flex boxes to transition smoothly, but instead I get smooth animation for the content and the boxes snap once it's finished.
https://codepen.io/anon/pen/YRVoqj
Related
This is a form for logging in. As noted in the black screen, the registration button is small. The question is how can I make the registration button as large as in the white image
This is part of the code for the record button
Register.vue:
<v-layout row>
<v-flex xs12>
<v-btn class="red accent-4 margine color myfont">
Sign up
</v-btn>
</v-flex>
</v-layout>
If you check the Vuetify documentation, you'll find, that in order for the button to extend the full width of its container, you give it the block property.
Like such:
<v-btn class="red accent-4 margine color myfont" block>
Sign up
</v-btn>
You'll find it all in the vuetify documentation
So i have been attempting to create a V-Card in vuetify with a specific layout. The top part of the card will vary in size and therefore I need to be able to align the bottom part of the card to the bottom.
So i've tried to do the following code here which should allow the first part to "grow" to fill the height and then the second part to "shrink" and stay at the bottom...
However, no success.. I probably just have done something sligthly wrong here but I'm pulling out my hair...
Here is my code:
<v-card shaped color="white" height="100%" width="100%">
<v-container fluid>
<v-layout column>
<v-flex grow>
{{ skinName }}
<v-img :src="skinImage" />
</v-flex>
<v-flex shrink>
<v-chip
class="ma-2"
color="indigo"
text-color="white"
>
<img height="10px" src="~static/logo-icon.png"> {{ priceInCoins | decimalPlace }}
</v-chip>
</v-flex>
</v-layout>
</v-container>
As you can see from my image, the blue "coins" should all align at the bottom in the same place no matter how big the text is above it!
Let me know if you need any more information.
Your container is not filling the height of the card, so there is no 'empty space' for the flexbox to redistribute. You can use the fill-height attribute on both the layout and the container element to make sure it stretches.
I have vuetify calendar component. This calendar (only on month type) is too big for mobile screen.
Helper images: image 1 image 2
this my code:
<v-layout align-space-around
justify-center
row wrap
column
fill-height>
<v-flex xs12>
<v-card flat>
<v-calendar
ref="calendar"
v-model="start"
:type="type"
:end="end"
:now="today"
:value="today"
ma-0
locale
#click:date="clickDate">
...some calendar code here...
</v-calendar>
</v-card>
</v-flex>
</v-layout>
The v-card element is rendering correctly, fits for device, but calendar takes more space (for width) that his parent (v-card).
I'll be glad for some help with that.
I am trying to get rounded corners on a v-card as I can get on a btn, but it does not seems to be possible ?
I used
<v-card round class="elevation-0">
Here is my template
<template>
<section id="section2">
<v-parallax :src="require('../../assets/images/members.jpeg')" height="380">
<v-layout column align-center justify-center>
<v-flex xs12 sm12 md8>
<v-card round class="elevation-0">
<v-card-title primary-title class="layout justify-center">
<h3 v-html="$t('lang.views.home.section4.thank_you')" ></h3>
</v-card-title>
<v-card-text>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-parallax>
</section>
</template>
v-card has rounded corners by default. It does not provide a prop named round to make it have more rounded corners.
If you want to have more rounded corners as compared to the default then add a custom css class to v-card
<v-card class="rounded-card">
css
.rounded-card{
border-radius:50px;
}
Here is a codepen
I would like to update Vamsi Krishna's answer. Vuetify now provides since v2.3 border utilities to quickly style the border-radius of any element.
To minimize custom CSS and make your Vue app more consitent, you may now use .rounded-xs, .rounded, .rounded-lg or .rounded-xl classes as specified in the docs:
<v-card class="rounded-lg">
You can use:
<v-card class="rounded-xl">
For round card in Vue.js:
Other Class{
.rounded-0
.rounded-sm
.rounded-md
.rounded-xl
.rounded-pill
.rounded-circle
}
Reference Link: https://vuetifyjs.com/en/styles/border-radius/#usage
v-card has a prop called shaped which applies border radius to top left and bottom right, but we can add our own border radius like this
<v-card shaped class="rounded-corner"></v-card>
CSS
.rounded-corner{
border-radius:20px;
}
You can use the border radius to style border-radiuses of any element. In Vuetify's official documentation they show its use in divs.
For instance, the below code gives you a rounded circle.
<div class="pa-7 secondary rounded-circle d-inline-block"></div>
Here's the documentation link: https://vuetifyjs.com/en/styles/border-radius/#removing-border-radius
Note: Using Vue.js and Vuetify.js for functionality and styling
I have card components dynamically generated with v-for, and I want to display them in 1/3/4 card(s) in a row depending on screen size (sm/md/lg). When I place them in Vuetify's grid system, with v-flex and v-layout elements, the cards are minimized, instead of moving to the second row.
Is there another way to go about this?
<v-content>
<v-card class="d-inline-flex" v-for="company of companies" :key="company.name">
<v-layout >
<v-flex md6 lg6>
<img class="company-logo" src="../assets/img/example-logo.png" alt="company logo">
</v-flex>
<v-flex md6 lg6>
<v-card-title class="headline pl-0">{{company.name}}</v-card-title>
<article class="text-md-left text-lg-left">
<v-btn #click="selectDashboard(href('stats', company.name))" :value="company.name"><v-icon>local_offer</v-icon></v-btn>
<v-btn #click="selectDashboard(href('process', company.name))" :value="company.name"><v-icon>notifications</v-icon></v-btn>
<v-btn #click="selectDashboard(href('example', company.name))" :value="company.name"><v-icon>rate_review</v-icon></v-btn>
<v-btn #click="selectDashboard(href('alerts', company.name))" :value="company.name"><v-icon>explore</v-icon></v-btn>
<v-btn #click="selectDashboard(href('profile', company.name))" :value="company.name"><v-icon>room</v-icon></v-btn>
</article>
</v-flex>
</v-layout>
</v-card>
</v-content>
For a visual, this codepen shows the images width size decreases (but height size stays the same) - https://codepen.io/johnjleider/pen/aLXBez?editors=1111
The accepted answer did not work for me with v2 of Vuetify.
Now we can use <v-col> and you would do something like below.
<v-row>
<v-col cols="12" sm="3" md="4" v-for="(something, index) in somethingsArray" :key="index" >
<my-component :my-data="something" />
</v-col>
</v-row>
Where cols="12" is the same as xs="12" and the column would take up the full 12 spaces.
The sizing scales up starting with the smallest screens. Then on small screens each column would take up 4 spaces resulting in 3 columns and then for medium and larger screens use 3 spaces resulting in 4 columns.
|__|__|__|__|__|__|__|__|__|__|__|__| 12 spaces in the grid
|-----------------------------------| <-cols=12 (1 column)
|--------|--------|--------|--------| <-sm=3 (4 columns)
|-----------|-----------|-----------| <-md=4 and larger (3 columns)
The <v-flex> grid maxes out at 12. So if you set xs12 (extra small breakpoint) on the <v-flex xs12> it will take up all of the grid width until it hits the next breakpoint (If you don't set another breakpoint the lowest one will be applied to all screen widths). So then set <v-flex xs12 md6>, now when you hit the medium breakpoint each card will take up 6 grid spaces, which will allow you to have 2 cards side by side. Setting lg3, will allow you to fit 4 cards in the same space.
You can see it working in this modification to your example
https://codepen.io/twandy/pen/JrxamB?editors=1001