c3lf/c3lf-system-3
7
0
Fork 0
Code Issues 52 Pull requests Projects 2 Releases Wiki Activity Actions

use slots to render a cards content

Browse source
This commit is contained in:
busti 2019-11-16 01:48:15 +01:00
parent becae553b8
commit 9c7c074305
2 changed files with 16 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/App.vue
View file

@ -16,7 +16,18 @@
:columns="['uid', 'description', 'box', 'image']"
:items="loadedItems"
:keyName="'uid'"
/>
v-slot="{ item }"
>
<img
:src="`https://picsum.photos/id/${item.uid + 50}/200/200`"
alt="item"
class="card-img-top img-fluid"
>
<div class="card-body">
<h6 class="card-title">{{ item.description }}</h6>
<h6 class="card-subtitle text-secondary">uid: {{ item.uid }} box: {{ item.box }}</h6>
</div>
</Cards>
</div>
</div>
</template>

16
src/components/Cards.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="row">
<div class="col-lg-3 col-xl-2">
<div class="col-lg-3 col-xl-3">
<div class="card bg-dark text-light mb-2" id="filters">
<div class="card-body">
<h5 class="card-title text-info">Sort & Filter</h5>
@ -29,16 +29,8 @@
</div>
<div class="col-lg-9 col-xl-8">
<transition-group name="card-list" tag="div" class="card-columns">
<div class="card-list-item card bg-dark text-light" v-for="item in internalItems" :key="item.uid">
<img
:src="`https://picsum.photos/id/${item.uid + 50}/200/200`"
alt="item"
class="card-img-top img-fluid"
>
<div class="card-body">
<h6 class="card-title">{{ item.description }}</h6>
<h6 class="card-subtitle text-secondary">uid: {{ item.uid }} box: {{ item.box }}</h6>
</div>
<div class="card-list-item card bg-dark text-light" v-for="item in internalItems" :key="item[keyName]">
<slot v-bind:item="item"/>
</div>
</transition-group>
</div>
@ -59,7 +51,7 @@ export default {
<style>
.card-list-item {
transition: all 1s;
transition: all 1s ease-in-out;
}
.card-list-enter, .card-list-leave-to {