bi-grid-layout
Advanced tools
vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired in React-Grid-Layout
Know of others? Create a PR to let me know!
# 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">
{{item.i}}
</grid-item>
</grid-layout>
layout
ArraytrueThis is the initial layout of the grid.
The value must be an Array of Object items. Each item must have i, x, y, w and h properties. Please refer to GridItem documentation below for more informations.
colNum
Numberfalse12Says how many columns the grid has.
The value should be a natural number.
rowHeight
Numberfalse150Says what is a height of a single row in pixels.
maxRows
NumberfalseInfinitySays what is a maximal number of rows in the grid.
margin
Arrayfalse[10, 10]Says what are the margins of elements inside the grid.
The value must be a two-element Array of Number. Each value is expressed in pixels. The first element is a margin horizontally, the second element is a vertical margin.
isDraggable
BooleanfalsetrueSays if the grids items are draggable.
isResizable
BooleanfalsetrueSays if the grids items are resizable.
isMirrored
BooleanfalsefalseSays if the RTL/LTR should be reversed.
autoSize
BooleanfalsetrueSays if the container height should swells and contracts to fit contents.
verticalCompact
BooleanfalsetrueSays if the layout should be compact vertically.
useCssTransforms
BooleanfalsetrueSays if the CSS transition-property: transform; should be used.
responsive
BooleanfalsefalseSays if the layout should be responsive to window width
breakpoints
ObjectfalseBreakpoints defined for responsive layout. Sets widths on wich column number changes
cols
ObjectfalseDefines number of columns for each breakpoint
i
StringtrueThis is the unique identifier of the item.
x
NumbertrueSays what is a initial horizontal position of the item (in which column it should be placed).
The value must be a whole number.
y
NumbertrueSays what is a initial vertical position of the item (in which row it should be placed).
The value must be a whole number.
w
NumbertrueSays what is a initial width of the item.
The value is a number that is multiplied by colWidth.
h
NumbertrueSays what is a initial height of the item.
The value is a number that is multiplied by rowHeight.
minW
Numberfalse1Says what is a minimal width of the item. If w will be smaller then minW then w will be set to minW.
The value is a number that is multiplied by colWidth.
minH
Numberfalse1Says what is a minimal hieght of the item. If h will be smaller then minH then h will be set to minH.
The value is a number that is multiplied by rowHeight.
maxW
NumberfalseInfinitySays what is a maximal width of the item. If w will be bigger then maxW then w will be set to maxW.
The value is a number that is multiplied by colWidth.
maxH
NumberfalseInfinitySays what is a maximal height of the item. If h will be bigger then maxH then h will be set to maxH.
The value is a number that is multiplied by rowHeight
isDraggable
BooleanfalsenullSays if item is draggable.
If default value is null then it's inherited from parent.
isResizable
BooleanfalsenullSays if item is resizable.
If default value is null then it's inherited from parent.
static
BooleanfalsefalseSays if item is static (won't be draggable, resizable or moved by other items).
dragIgnoreFrom
Stringfalse'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.
dragAllowFrom
StringfalsenullSays 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 (excluding dragIgnoreFrom) element of the item.
For more info please refer to allowFrom in interact.js docs.
resizeIgnoreFrom
Stringfalse'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.
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"
@resize="resizeEvent"
@move="moveEvent"
@resized="resizedEvent"
@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);
},
If you have a feature request, please add it as an issue or make a pull request.
FAQs
A draggable and resizable grid layout, as a Vue component.
We found that bi-grid-layout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.