0.0.5 • Published 3 years ago
em-fetch v0.0.5
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' |