vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout
For Vue 2.1.10 and below use version 2.1.3
For Vue 1 use version 1.0.3
English | 简体中文
Know of others? Create a PR to let me know!
- Draggable widgets
- Resizable widgets
- Static widgets
- Bounds checking for dragging and resizing
- Widgets may be added or removed without rebuilding grid
- Layout can be serialized and restored
- Automatic RTL support (resizing not working with RTL on 2.2.0)
- Responsive
# install with npm
npm install vue-grid-layout --save
# install with yarn
yarn add vue-grid-layout
Import the library
import VueGridLayout from 'vue-grid-layout';
Add to other Vue components
export default {
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem
},
// ... data, methods, mounted (), etc.
}
Include the browser-ready bundle (download from releases) in your page. The components will be automatically available.
<script src="vue-grid-layout.umd.min.js"></script>
var testLayout = [
{"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":5,"i":"2"},
{"x":6,"y":0,"w":2,"h":3,"i":"3"},
{"x":8,"y":0,"w":2,"h":3,"i":"4"},
{"x":10,"y":0,"w":2,"h":3,"i":"5"},
{"x":0,"y":5,"w":2,"h":5,"i":"6"},
{"x":2,"y":5,"w":2,"h":5,"i":"7"},
{"x":4,"y":5,"w":2,"h":5,"i":"8"},
{"x":6,"y":3,"w":2,"h":4,"i":"9"},
{"x":8,"y":4,"w":2,"h":4,"i":"10"},
{"x":10,"y":4,"w":2,"h":4,"i":"11"},
{"x":0,"y":10,"w":2,"h":5,"i":"12"},
{"x":2,"y":10,"w":2,"h":5,"i":"13"},
{"x":4,"y":8,"w":2,"h":4,"i":"14"},
{"x":6,"y":8,"w":2,"h":4,"i":"15"},
{"x":8,"y":10,"w":2,"h":5,"i":"16"},
{"x":10,"y":4,"w":2,"h":2,"i":"17"},
{"x":0,"y":9,"w":2,"h":3,"i":"18"},
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
];
new Vue({
el: '#app',
data: {
layout: testLayout,
},
});
<grid-layout
:layout.sync="layout"
:col-num="12"
:row-height="30"
:is-draggable="true"
:is-resizable="true"
:is-mirrored="false"
:vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true"
>
<grid-item v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:key="item.i">
{{item.i}}
</grid-item>
</grid-layout>
-
layout
- type:
Array
- required:
true
This is the initial layout of the grid.
The value must be an
Array
ofObject
items. Each item must havei
,x
,y
,w
andh
properties. Please refer to the documentation forGridItem
below for more information. - type:
-
colNum
- type:
Number
- required:
false
- default:
12
Says how many columns the grid has.
The value should be a natural number.
- type:
-
rowHeight
- type:
Number
- required:
false
- default:
150
Says what is a height of a single row in pixels.
- type:
-
maxRows
- type:
Number
- required:
false
- default:
Infinity
Says what is a maximal number of rows in the grid.
- 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:
-
isDraggable
- type:
Boolean
- required:
false
- default:
true
Says if the grids items are draggable.
- type:
-
isResizable
- type:
Boolean
- required:
false
- default:
true
Says if the grids items are resizable.
- type:
-
isMirrored
- type:
Boolean
- required:
false
- default:
false
Says if the RTL/LTR should be reversed.
- type:
-
autoSize
- type:
Boolean
- required:
false
- default:
true
Says if the container height should swells and contracts to fit contents.
- type:
-
verticalCompact
- type:
Boolean
- required:
false
- default:
true
Says if the layout should be compact vertically.
- type:
-
preventCollision
- type:
Boolean
- required:
false
- default:
false
Says if grid items will move when being dragged over.
- type:
-
useCssTransforms
- type:
Boolean
- required:
false
- default:
true
Says if the CSS
transition-property: transform;
should be used. - type:
-
responsive
- type:
Boolean
- required:
false
- default:
false
Says if the layout should be responsive to window width
- type:
-
breakpoints
- type:
Object
- required:
false
- default: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
Breakpoints defined for responsive layout. Sets widths on wich column number changes
- type:
-
cols
- type:
Object
- required:
false
- default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }
Defines number of columns for each breakpoint
- type:
-
i
- type:
String
- required:
true
This is the unique identifier of the item.
- type:
-
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:
-
minW
- type:
Number
- required:
false
- default:
1
Says what is a minimal width of the item. If
w
will be smaller thenminW
thenw
will be set tominW
.The value is a number that is multiplied by
colWidth
. - type:
-
minH
- type:
Number
- required:
false
- default:
1
Says what is a minimal hieght of the item. If
h
will be smaller thenminH
thenh
will be set tominH
.The value is a number that is multiplied by
rowHeight
. - type:
-
maxW
- type:
Number
- required:
false
- default:
Infinity
Says what is a maximal width of the item. If
w
will be bigger thenmaxW
thenw
will be set tomaxW
.The value is a number that is multiplied by
colWidth
. - type:
-
maxH
- type:
Number
- required:
false
- default:
Infinity
Says what is a maximal height of the item. If
h
will be bigger thenmaxH
thenh
will be set tomaxH
.The value is a number that is multiplied by
rowHeight
- type:
-
isDraggable
- type:
Boolean
- required:
false
- default:
null
Says if item is draggable.
If default value is
null
then it's inherited from parent. - type:
-
isResizable
- type:
Boolean
- required:
false
- default:
null
Says if item is resizable.
If default value is
null
then it's inherited from parent. - type:
-
static
- type:
Boolean
- required:
false
- default:
false
Says if item is static (won't be draggable, resizable or moved by other items).
- type:
-
dragIgnoreFrom
- type:
String
- required:
false
- default:
'a, button'
Says which elements of the item shouldn't trigger drag event of the item.
The value is
css-like
selector string.For more info please refer to
ignoreFrom
in interact.js docs. - type:
-
dragAllowFrom
- type:
String
- required:
false
- default:
null
Says which elements of the item should trigger drag event of the item.
The value is
css-like
selector string.If
null
then one can drag by any (excludingdragIgnoreFrom
) element of the item.For more info please refer to
allowFrom
in interact.js docs. - type:
-
resizeIgnoreFrom
- type:
String
- required:
false
- default:
'a, button'
Says which elements of the item shouldn't trigger resize event of the item.
The value is
css-like
selector string.For more info please refer to
ignoreFrom
in interact.js docs. - type:
Move and resize event listeners can be added to each grid-item, so that the parent Vue can be notified when a grid element is being moved or resized. Moved and resized event listeners can be added, if the only notification needed is when an item is finished moving or resizing.
Working example here
<grid-layout
:layout="layout"
:col-num="12"
:row-height="30"
:is-draggable="true"
:is-resizable="true"
:vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true"
@layout-created="layoutCreatedEvent"
@layout-before-mount="layoutBeforeMountEvent"
@layout-mounted="layoutMountedEvent"
@layout-ready="layoutReadyEvent"
@layout-updated="layoutUpdatedEvent"
>
<grid-item v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:key="item.i"
@resize="resizeEvent"
@move="moveEvent"
@resized="resizedEvent"
@container-resized="containerResizedEvent"
@moved="movedEvent">
{{item.i}}
</grid-item>
</grid-layout>
-
layoutCreatedEvent
Layout created event
Emited on the component created lifecycle hook
layoutCreatedEvent: function(newLayout){
console.log("Created layout: ", newLayout)
}
-
layoutBeforeMountEvent
Layout beforeMount event
Emited on the component beforeMount lifecycle hook
layoutBeforeMountEvent: function(newLayout){
console.log("beforeMount layout: ", newLayout)
}
-
layoutMountedEvent
Layout mounted event
Emited on the component mounted lifecycle hook
layoutMountedEvent: function(newLayout){
console.log("Mounted layout: ", newLayout)
}
-
layoutReadyEvent
Layout ready event
Emited when all the operations on the mount hook finish
layoutReadyEvent: function(newLayout){
console.log("Ready layout: ", newLayout)
}
-
layoutUpdatedEvent
Layout updated event
Every time the layout has finished updating and positions of all grid-items are recalculated
layoutUpdatedEvent: function(newLayout){
console.log("Updated layout: ", newLayout)
}
-
moveEvent
Move event
Every time an item is being moved and changes position
moveEvent: function(i, newX, newY){
console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
},
-
resizeEvent
Resize event
Every time an item is being resized and changes size
resizeEvent: function(i, newH, newW, newHPx, newWPx){
console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
},
-
movedEvent
Moved event
Every time an item is finished being moved and changes position
movedEvent: function(i, newX, newY){
console.log("MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
},
-
resizedEvent
Resized event
Every time an item is finished being resized and changes size
/**
*
* @param i the item id/index
* @param newH new height in grid rows
* @param newW new width in grid columns
* @param newHPx new height in pixels
* @param newWPx new width in pixels
*
*/
resizedEvent: function(i, newH, newW, newHPx, newWPx){
console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
},
-
containerResizedEvent
Container Resized event
Every time the grid item/layout container changes size (browser window or other)
/**
*
* @param i the item id/index
* @param newH new height in grid rows
* @param newW new width in grid columns
* @param newHPx new height in pixels
* @param newWPx new width in pixels
*
*/
containerResizedEvent: function(i, newH, newW, newHPx, newWPx){
console.log("CONTAINER RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
},
If you have a feature request, please add it as an issue or make a pull request.
- Basic grid layout
- Responsive
- Draggable grid items
- Resizable grid items
- Static elements
- Min/max w/h per item