vue-grid-view v1.0.6
vue-grid-view
A grid view render, for Vue.js.
Features
- configurable grid row number & column number
- grid item width is responsive by a ratio of
w : colNum
- grid item height is responsive by a ratio of
h : rowNum
Getting Started
Installation
Install the vue-grid-view package package using npm:
npm install vue-grid-view
Usage
import { GridView, GridItem } from 'vue-grid-view'
or include the script in your html (download from releases):
<script src="vue-grid-view.min.js"></script>
var testView = [
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
{"x":4,"y":0,"w":2,"h":6,"i":"2"},
{"x":6,"y":0,"w":3,"h":3,"i":"3"},
{"x":9,"y":0,"w":3,"h":3,"i":"4"},
{"x":4,"y":6,"w":2,"h":6,"i":"5"}
];
var GridView = VueGridView.GridView;
var GridItem = VueGridView.GridItem;
new Vue({
el: '#app',
components: {
GridView,
GridItem,
},
data: {
viewList: testView,
},
});
<grid-view
:view="viewList"
:col-num="12"
:row-num="12"
:margin="[10, 10]"
:use-css-transforms="true"
>
<grid-item v-for="item in viewList"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
>
{{item.i}}
</grid-item>
</grid-view>
Documentation
Properties
GridView
view
- type:
Array
required:
true
This is the initial view of the grid.
The value must be an
Array
ofObject
items. Each item must havei
,x
,y
,w
andh
proprties. Please refer toGridItem
documentation below for more informations.
- type:
colNum
- type:
Number
- required:
false
default:
12
Says how many columns the grid has.
The value should be a natural number.
- type:
rowNum
- type:
Number
- required:
false
default:
12
Says how many rows the grid has.
The value should be a natural number.
- type:
margin
- type:
Array
- required:
false
default:
[10, 10]
Says what are the margins of elements inside the grid.
The value must be a two-element
Array
ofNumber
. Each value is expressed in pixels. The first element is a margin horizontally, the second element is a vertical margin.
- type:
useCssTransforms
- type:
Boolean
- required:
false
default:
true
Says if the CSS
transition-property: transform;
should be used.
- type:
GridItem
x
- type:
Number
required:
true
Says what is a initial horizontal position of the item (in which column it should be placed).
The value must be a whole number.
- type:
y
- type:
Number
required:
true
Says what is a initial vertical position of the item (in which row it should be placed).
The value must be a whole number.
- type:
w
- type:
Number
required:
true
Says what is a initial width of the item.
The value is a number that is multiplied by
colWidth
.
- type:
h
- type:
Number
required:
true
Says what is a initial height of the item.
The value is a number that is multiplied by
rowHeight
.
- type: