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