em-fetch

em-grid-card-items

Card grid

Install

npm install --save em-grid-card-items

Add to project

Global

#stylesheet.css

Vue.use options

// main.js
import EmGridCardItems from 'em-grid-card-items'
Vue.use(EmGridCardItems)

Local Usage

<template>
  <div>
      <em-grid-card-items
              :column-count="5"
              :column-spacing="10"
              :row-spacing="10"
              :is-add-mode-item="false"
              mode="add"
              resource-name="products"
              item-prop-name="product"
              em-card-type="EmCardProduct"
              :off-direction="false"
              :card-props="{isEditMode: true}"
              @action=""
      />
      <em-grid-card-items
              :column-count="5"
              resource-name="products"
              item-prop-name="product"
              em-card-type="EmCardProduct"
              :card-props="{isEditMode: true}"
              @action=""
      />
  </div>
</template>
<script>
  export default {
    name: 'component.vue',
    components: {EmSvg},
  }
</script>

Setup

Parameters

Props(Parameter)	Type	Default	Description
column-count	Number	0	Колличесиво колонок
column-spacing	Number	20	Растояние между колонками елементов
row-spacing	Number	column-spacing	Растояние между рядами елементов, если 0 или не установлено используется column-spacing
resource-name	String	null	Путь api ресурса на backend
resource-prefix	String	null	Префикс пути api ресурса на backend
resource-params	Object	{}	Обьект параметров передоваемых в запросе к api ресурса на backend
item-prop-name	String	null	Название параметра по которому передаётся обьект в компонент
card-props	Object	null	Дополнительные параметра передоваемые в обьект в компонента
em-card-type	String	null	Название компонента
off-direction	Boolean	false	Распределение колонок производится flex-wrap, column-count игнорируется
is-add-mode-item	Boolean	false	Показывать ли карточку в режиме добаления елементов
check-list	Array	[]	Массив для хранения выделения елементов
mode	String	[padination,add]	Режим загрузки ресурса
is-dark-button	Boolean	false	Тип кнопки "Показать еще" true?'primary':'warning'

License

The MIT License