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',
  }
</script>

Setup

Parameters

Props(Parameter) | Type | Default | Description --------- | ---- | ------- | ----------- column-count | Number | 0 | Number of speakers column-spacing | Number | 20 | Distance between columns of elements row-spacing | Number | column-spacing | Distance between rows of elements, if 0 or not set column-spacing is used resource-name | String | null | The api path of the resource on the backend resource-prefix | String | null | Resource api path prefix on backend resource-params | Object | {} | The object of the parameters passed in the request to the api of the resource on the backend item-prop-name | String | null | The name of the parameter by which the object is passed to the component card-props | Object | null | Additional parameters passed to the object in the component em-card-type | String | null | Component name off-direction | Boolean | false | Column distribution is done by flex-wrap, column-count is ignored is-add-mode-item | Boolean | false | Whether to show the card in the mode of adding elements check-list | Array | [] | Array for storing selection of elements mode | String | [padination, add] | Resource loading mode is-dark-button | Boolean | false | Show more button type true? 'Primary': 'warning'

License

The MIT License