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: