Zeen Component Library

# ZeenCardProductList

компонент для показа карточек товаров

# Примеры:

  • 50
    Товар 1 (категория)
    Товар 1
    Описание товара
    50
    коинов
  • 30
    Товар 2 (категория)
    Товар 2
    Описание товара
    20
    коинов
  • 60
    Товар 3 (категория)
    Товар 3
    Описание товара
    40
    коинов
  • 10
    Товар 4 (категория)
    Товар 4
    Описание товара
    30
    коинов
  • 0
    Товар 5 (категория)
    Товар 5
    Описание товара
    30
    коинов
    Распродано

# Source Code

<template lang="pug">
  .zeen-card-list
    ul.zeen-card-list__items
      li.zeen-card-list__item(v-for='(item, index) in list' :key='`${item.title}-${index}`' )
        ZeenCardProduct(:item='item')
          template(#stock)
            slot(name='cards-quantity')
          template(#footer)
            slot(name='cards-footer')
</template>

<script>
import ZeenCardProduct from '../../components/ZeenCardProduct'
export default {
  name: 'ZeenCardProductList',
  components: {
    ZeenCardProduct,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    currency: String,
  },
}
</script>
<style lang="scss">
@import '../../styles/mixins.scss';
:root {
  --card-list-per-view: 4;
  --card-list-item-width: 100%;
  --card-list-items-gap: 20px;
  --card-list-padding-vertical: 100px;

  @include desktop() {
    --card-list-per-view: 3;
  }

  @include tablets() {
    --card-list-per-view: 2;
    --card-list-padding-vertical: 80px;
  }

  @include phones() {
    --card-list-padding-vertical: 60px;
  }

  @include phones-small() {
    --card-list-per-view: 1;
    --card-list-item-width: 90%;
  }

  --list-items-padding: 0;
}
</style>
<style lang="scss" scoped>
.zeen-card-list {
  padding: var(--card-list-padding-vertical) 0;

  &__items {
    display: grid;
    grid-template-columns: repeat(var(--card-list-per-view), 1fr);
    grid-column-gap: var(--card-list-items-gap);
    grid-row-gap: var(--card-list-items-gap);
    padding: var(--list-items-padding);
  }

  &__item {
    width: var(--card-list-item-width);
    list-style-type: none;
    margin: 0 auto;
  }
}
</style>

← ZeenSpeakerSectionLayoutTable →