Responsive card view list ?

[dclause]

trafficstars

Hi !

May I ask you an advice on how to achieve a responsive card view list using this possible (if possible) ?

In a standard listing, each item is a row with 100% width. I would like my items to take from 100% to 25% width depending on viewport size. In other word, on computer screen, I would like to have up to 4 items on the same row. Because every items are set with absolute position and transformed translation, I currently can't manage my way.

Thanks for help

[CesarGomezTissini]

There is a cardSize property. Play with it plus a listener to resize

[kilobyte2007]

There is a cardSize property. Play with it plus a listener to resize

Where is it? I don't see it in the docs.

[JasonLandbridge]

Quick example:

<template>
  <RecycleScroller
    id="poster-table"
    v-slot="{ item, index }"
    :items="items"
    :item-size="340"
    :item-secondary-size="posterCardWidth"
    :grid-items="gridItems"
    key-field="id"
    @resize="onResize"> <!--  Listen to resize event, it won't give you an event with size or something -->
    <media-poster :item="item" />
  </RecycleScroller>
</template>

<script setup lang="ts">
import { RecycleScroller } from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
import { useElementBounding } from '@vueuse/core';

const gridItems = ref(4);
const posterCardWidth = ref(200);

function onResize() {
  // We use this to get the width of the scrolling container:
  const { width } = useElementBounding(posterTableRef); 

  // Calculate the maximum media posters we can fit in a row based on the scroller width:
  gridItems.value = Math.floor(width.value / posterCardWidth.value);
}
</script>