c3lf/c3lf-system-3
7
0
Fork 0
Code Issues 51 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']" :columns="['uid', 'description', 'box', 'image']"
:items="loadedItems" :items="loadedItems"
:keyName="'uid'" :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>
</div> </div>
</template> </template>

16
src/components/Cards.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="row"> <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 bg-dark text-light mb-2" id="filters">
<div class="card-body"> <div class="card-body">
<h5 class="card-title text-info">Sort & Filter</h5> <h5 class="card-title text-info">Sort & Filter</h5>
@ -29,16 +29,8 @@
</div> </div>
<div class="col-lg-9 col-xl-8"> <div class="col-lg-9 col-xl-8">
<transition-group name="card-list" tag="div" class="card-columns"> <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"> <div class="card-list-item card bg-dark text-light" v-for="item in internalItems" :key="item[keyName]">
<img <slot v-bind:item="item"/>
: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> </div>
</transition-group> </transition-group>
</div> </div>
@ -59,7 +51,7 @@ export default {
<style> <style>
.card-list-item { .card-list-item {
transition: all 1s; transition: all 1s ease-in-out;
} }
.card-list-enter, .card-list-leave-to { .card-list-enter, .card-list-leave-to {