How can I achieve the multi card inside carousel similar to this Demo in Vuetify
<v-carousel>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src">
<card></card> // card will be here
</v-carousel-item>
</v-carousel>
I would like to show 6 cards per slide, 3 columns and 2 rows. Or if there are any plugins available
You need two "v-for", the first with limit 2, second with limit 6. And if you want 2 rows look the vuetify official documentation grid system documentation
Try this, it is without style of your example
<v-flex>
<v-carousel hide-delimiters style="box-shadow: 0px 0px">
<v-carousel-item v-for="i in 2" :key="i">
<v-layout row>
<v-flex sm4 v-for="j in 6" :key="j" pl-2 pr-2>
<v-card>
<v-img
src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
aspect-ratio="0.8"
></v-img>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Card {{i}}-{{j}}</h3>
<div> Card text </div>
</div>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</v-carousel-item>
</v-carousel>
</v-flex>
It seems like Carousel is not the best component to use in this case.
It might use vuetify Slide groups instead: https://vuetifyjs.com/en/components/slide-groups/
Or a mix of both
Related
I have an outer Vue template:
<template>
<v-container fluid>
<div>
<v-row>
<v-col md="4" class="pa-1" v-for="i in allComponents" :key="i.id">
<gokb-reviews-title-card
:id="i.id.toString()"
#keys="addkeyFields"
/>
</v-col>
</v-row>
</div>
</v-container>
</template>
and an inner Vue template (gokb-reviews-title-card)
<template>
<v-card class="elevation-4 flex d-flex flex-column" v-if="!!title?.name">
<v-card-title primary-title>
<h5 class="titlecard-headline">{{ title.name }}</h5>
</v-card-title>
<v-card-text class="flex" v-for="(i, count) in title.identifiers" :key="i.id">
<div v-if="count == 0">{{ $tc('component.identifier.label', 2) }}</div>
<div class="titlecard-ids" :class="i.namespace.value">{{ i.namespace.value }}: {{ i.value }}</div>
</v-card-text>
<v-card-text class="flex" v-if="!!title?.history">
<div class="titlecard-history">{{ $t('component.title.history.label') }}</div>
<div class="titlecard-history">{{ title.history }}</div>
</v-card-text>
</v-card>
</template>
The row consists of 3 gokb-reviews-title-cards. I want to have it 4 cards.
I've tried to change it by adding cols="3" to the v-col as discussed in this question. This did not show any effect.
Adding a CSS .grid to the outer-most <div> (discussed here) can change the width of a card, but the maximum number of cards per row stays 3. The row is "half-filled" then. The CSS I tried is:
.reviews-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
};
How can I make the <v-row> contain 4 <v-col>s thet each contain 1 card?
I think it is because you have md="4" in
<v-col md="4" class="pa-1" v-for="i in allComponents" :key="i.id">
if you change it to 3 it should work since it's a 12-based grid
<v-col md="3" class="pa-1" v-for="i in allComponents" :key="i.id">
in addition, your cols="3" might not be working because it only applies to widths narrower than the md breakpoint.
If you are using responsive layouts keep the md, but also define other widths, either through cols or xs. Otherwise just use cols
I have tried loads of different options with the following code, however, I can't get this to fill the remaining height. (The second layout should fill the remaining height) what am I doing wrong here?
<template>
<div class="earnIndex">
<v-container fluid fill-height>
<v-layout row wrap>
<v-flex
v-for="(offer, index) in offers"
:key="index"
xs2
class="pa-1"
>
<SiteButton
:site-name="offer.siteName"
/>
</v-flex>
</v-layout>
<v-layout column fill-height>
<v-flex grow>
<v-card>
<p>
test
</p>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
EDIT:
So here is my new code:
<template>
<v-layout column wrap>
<v-flex>
<v-layout row wrap class="red">
<v-flex
v-for="(offer, index) in offers"
:key="index"
class="pa-1"
xs2
>
<SiteButton
:site-name="offer.siteName"
/>
</v-flex>
</v-layout>
</v-flex>
<v-flex grow align-content-start>
<v-card height="100%">
<p>
test
</p>
</v-card>
</v-flex>
</v-layout>
</template>
This creates the following:
I would like the card with "test" to start straight after the links at the top, and then fill the rest of the height.
Thank you in advanced for your help!
Regards,
Josh
Try using column fill-height on the right side, and then grow on the v-flex...
<v-container fluid fill-height>
<v-layout row wrap>
<v-flex v-for="(offer, index) in offers" :key="index" xs2 class="pa-1">
<v-btn>{{ offer.siteName }}</v-btn>
</v-flex>
</v-layout>
<v-layout column fill-height>
<v-flex grow>
<v-card class="fill-height">
<p> test </p>
</v-card>
</v-flex>
</v-layout>
</v-container>
https://codeply.com/p/bwE5ifP4Pe
You don't need as much markup in your scenario and can cut this down to just a few lines.
I just filled in some numbers instead of your custom component in the v-for.
This will stretch the lower card to the maximum amount right after your for loop. The v-row and v-col is the way to go now in 2.0 (https://vuetifyjs.com/en/components/grids/).
<div class="d-flex fill-height" style="flex-direction:column">
<v-row class="blue">
<v-col cols="2" v-for="i in 15" :key="i" class="pa-1">
<v-btn>{{ i }}</v-btn>
</v-col>
</v-row>
<div class="fill-height" style="background-color: salmon">Down</div>
</div>
Codesandbox example
My v-flex it is not respecting my orders and only half of element it was rendered. see the print:
Print from my view
Here is my script:
<v-card-title primary-title>
<div>
<p class="subheading grey--text">My title</p>
<h3 class="headline my-4">my sub title</h3>
<div>
<v-container fluid>
<v-card flat v-for="ticket in tickets" :key="ticket.id">
<v-layout row wrap :class="`pa-2 ticket ${ticket.status.id}`">
<v-flex xs3>
<div class="caption grey--text">#ID</div>
<div>{{ticket.id}}</div>
</v-flex>
<v-flex xs3>
<div class="caption grey--text">Assunto</div>
<div>{{ticket.subject}}</div>
</v-flex>
<v-flex xs3>
<div class="caption grey--text">Criado em</div>
<div>{{ticket.created_on}}</div>
</v-flex>
<v-flex xs3>
<div class="right">
<v-chip
small
:class="`${ticket.status.id} white--text caption my-2`"
>{{ticket.status.name}}</v-chip>
</div>
</v-flex>
</v-layout>
</v-card>
</v-container>
</div>
</div>
</v-card-title>
Someone has any ideas?
Tks.
You can add a full width flex box above the v-card on line 7:
<v-flex xs12>
<v-card flat v-for="ticket in tickets" :key="ticket.id">
...
EDIT: My mistake... after taking another look you can change the div on line 2 to a v-flex, which will give you the results like in this codepen: https://codepen.io/retrograde/pen/ZNYJRq?editors=0001 Note that I removed the code added by my original answer.
I am trying to make list of cards using vuetify v-flex here is the code
<div id="app">
<v-app>
<v-content>
<v-container fill-height fluid>
<v-layout>
<v-flex xs12>
<v-card dark color="grey">
<v-card-title>
<div>
<h2>Top Questions</h2>
</div>
</v-card-title>
</v-card>
</v-flex>
<v-flex xs12>
<v-card v-for="item in items" :key="item._id">
<v-card-title>
<h3>{{ item.title }}</h3>
<p>{{ item.content }}</p>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
I am expecting each v-flex will fill 100% of the row. However, they only filled half of it.
https://codepen.io/anon/pen/mKBMEW
I can, however, add prop d-inline-block at v-layout. I am just curious about what happened with my first code before.
When I used Ikbel's column solution, my flex-components max-width was overwritten to always be 100%. What I did is give row wrap attributes to v-layout.
I think you need to add column attribute to v-layout.
For those who pass through this again.
In latest vuetify (from v2.x, e.g. 2.4), no longer has xs on v-col any more, use cols=12 instead.
Related post: vuetify v-col xs="12" only fill half the width
I am using vuetify and vuejs. I have 4 expansion panels that are aligned two columns and two rows. what i need is that when you click on one the rest 3 dissappear and the clicked one fill the entire container where they are located.
if you have a way of achieving this that isnt vuetify thats fine as well though id prefer vuetify
Html:
<div id="mainContent">
<v-app>
<v-container>
<v-layout row wrap>
<v-flex xs12 lg5 mb-3>
<v-expansion-panel popout>
<v-expansion-panel-content>
<div slot="header" v-on:click="isHidden = !isHidden">Title</div>
<v-card>
<v-card-text>
Content Goes here
</v-card-text>
</v-card>
</v-expansion-panel-content>
<v-expansion-panel-content>
<div slot="header" v-if="!isHidden">Title</div>
<v-card>
<v-card-text>
Content Goes here
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-flex>
<v-flex xs12 lg5 mb-3>
<v-expansion-panel popout>
<v-expansion-panel-content>
<div slot="header">Title</div>
<v-card>
<v-card-text>
Content Goes here
</v-card-text>
</v-card>
</v-expansion-panel-content>
<v-expansion-panel-content>
<div slot="header">Title</div>
<v-card>
<v-card-text>
Content Goes here
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
script is:
<script>
var mainContent = new Vue({
el: '#mainContent',
data: {
isHidden : false
}
})
</script>
The mistake you are making is using v-flex containers as rows. As per documentation this sets flex: 1 1 auto, so there will always be as many elements in your row as there are DOM elements in your v-flex. If you wrap each element with a v-flex, and you use methods and computed values, i'm sure your task is attainable. Heres a small codepen you can fine-tune to get the task accomplished