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.
Related
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.
This should be a simple fix but not sure where to start.
I have..
<template>
<div class="mx-5 mb-5 Weapons">
<h1 class="green--text">Weapons</h1>
<v-container class="my-5">
<v-layout row wrap>
<v-flex xs12 s6 m4 lg3 v-for="weapon in assaultrifles" :key="weapon.weapontype">
<v-card class="text-md-center ma-3 black">
<v-responsive class="pt-4">
<v-img contain :src="weapon.images"></v-img>
</v-responsive>
<v-card-title class="justify-center">
<div class="heading font-weight-black white--text">{{ weapon.WeaponType}}</div>
</v-card-title>
<v-card-actions class="justify-center">
<v-btn flat class="green black--text ma-3">View Weapons</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
I then have data in arrays with images and "titles" for these cards. I have about 8 cards , each representing its own "category" which is represented by the "title" data in my array.
What I am trying to do is make it so if I click on a card with the category/title "Handgun" or click on a card "rifle", I will be routed to a new page where I list out items for that specific category.. however I am not sure where to start because I am simply passing {{weapon.WeaponType}} into 1 card object, and then using 1 button ( with the text "view weapon"), across all the cards.
My understanding is that if I make a route for the 1 button I made, then the route will be the same for all buttons, despite the cards representing its own category, which would be bad because I don't want to see "handguns" when I click on the "shotgun" card’s button.
I want to somehow keep my current structure ( using 1 object and passing a loop of data ) and 1 btn, so that my code stays around the same length/structure).
Thanks for reading.
You will need additional property in your objects - for the route of the button:
<v-btn
flat
class="green black--text ma-3"
:to="weapon.route"
>
View Weapons
</v-btn>
The weapon.route can be a string or an object.
Another option is to provide just the category IDs and then
<v-btn
flat
class="green black--text ma-3"
:to="{name: 'weaponItems', params: {categoryID: weapon.categoryID}}"
>
View Weapons
</v-btn>
I created a LoadingOverlay component managed by Vuex. The state represents its visibility. The current overlay component uses this code
<template>
<v-dialog value="true" transition="false" fullscreen hide-overlay scrollable>
<v-card>
<v-layout justify-center align-center fill-height>
<v-progress-circular :size="80" :width="5" indeterminate color="primary"></v-progress-circular>
</v-layout>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: "LoadingOverlay"
};
</script>
I created an example showing a demo
https://codesandbox.io/s/j7jjrpw83
I would like to setup opacity for the overlay. Currently the background is white and the view gets fully covered. I want to have an opacity of 0.7 for the overlay background.
Do I have to use my own CSS or is there a ready to use opacity attribute that I can add to the overlay component?
I know I could use color="transparent" but this would be too much.
I'm not too sure if this is the best "Vue" way to do it as I've never used Vue, but you can set the color on the v-card to have a translucent background colour:
<v-card color="rgba(255, 255, 255, 0.7)">
<v-layout justify-center align-center fill-height>
<v-progress-circular :size="80" :width="5" indeterminate color="primary"></v-progress-circular>
</v-layout>
</v-card>
See fiddle
Or even using style and opacity:
<v-card style="opacity: 0.7">
<v-layout justify-center align-center fill-height>
<v-progress-circular :size="80" :width="5" indeterminate color="primary"></v-progress-circular>
</v-layout>
</v-card>
<v-card overlay-opacity="0.15">
<...>
</v-card>
i have a layout which each row has 4 divs, now in mobile i want to change 4 divs to 2 divs like image
here is my code
<v-layout wrap align-center>
<v-flex
v-for="n in 10 "
:key="n"
xs3
>
<p>testtttt</p>
</v-flex>
</v-layout>
Example from Vuetify
https://codepen.io/thanhtungvo/pen/Padagq?&editors=100
current there are 3 images, how to change 2 images and keep the max-width in mobile version(responsive)
Thanks
thanks for Vuetify, it can be fixed like that
<v-flex
v-for="i in 4 "
:key="i"
xs6
md3
>
xs6: for small screen
md3: for medium screen
other metrics can check on the document
https://vuetifyjs.com/en/layout/display
<v-flex v-for="i in 6" :key="i" xs6>
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