Repository files navigation

vue-grid-layout is a grid layout system, likeGridster, for Vue.js.Heavily inspired inReact-Grid-Layout

[Demo |Changelog]

• Draxed

Know of others? Create a PR to let me know!

• Draggable widgets
• Resizable 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

importVueGridLayoutfrom'vue-grid-layout';

Add to other Vue components

exportdefault{components:{GridLayout:VueGridLayout.GridLayout,GridItem:VueGridLayout.GridItem},// ... data, methods, mounted (), etc.}

Include the browser-ready bundle (download fromreleases) in your page. The components will be automatically available.

<scriptsrc="vue-grid-layout.umd.min.js"></script>

vartestLayout=[{"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":4,"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"}];newVue({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-itemv-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

  • type:Array
  • required:true

  This is the initial layout of the grid.

  The value must be anArray ofObject items. Each item must havei,x,y,w andh properties. Please refer toGridItem documentation below for more informations.

• colNum

  • type:Number
  • required:false
  • default:12

  Says how many columns the grid has.

  The value should be anatural number.

• rowHeight

  • type:Number
  • required:false
  • default:150

  Says what is a height of a single row in pixels.

• maxRows

  • type:Number
  • required:false
  • default:Infinity

  Says what is a maximal number of rows in the grid.

• margin

  • type:Array
  • required:false
  • default:[10, 10]

  Says what are the margins of elements inside the grid.

  The value must be a two-elementArray ofNumber. Each value is expressed in pixels. The first element is a margin horizontally, the second element is a vertical margin.

• isDraggable

  • type:Boolean
  • required:false
  • default:true

  Says if the grids items are draggable.

• isResizable

  • type:Boolean
  • required:false
  • default:true

  Says if the grids items are resizable.

• isMirrored

  • type:Boolean
  • required:false
  • default:false

  Says if the RTL/LTR should be reversed.

• autoSize

  • type:Boolean
  • required:false
  • default:true

  Says if the container height should swells and contracts to fit contents.

• verticalCompact

  • type:Boolean
  • required:false
  • default:true

  Says if the layout should be compact vertically.

• useCssTransforms

  • type:Boolean
  • required:false
  • default:true

  Says if the CSStransition-property: transform; should be used.

• responsive

  • type:Boolean
  • required:false
  • default:false

  Says if the layout should be responsive to window width

• 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

• cols

  • type:Object
  • required:false
  • default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }

  Defines number of columns for each breakpoint

• i

  • type:String
  • required:true

  This is the unique identifier of the item.

• 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 awhole number.

• 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 awhole number.

• w

  • type:Number
  • required:true

  Says what is a initial width of the item.

  The value is a number that is multiplied bycolWidth.

• h

  • type:Number
  • required:true

  Says what is a initial height of the item.

  The value is a number that is multiplied byrowHeight.

• minW

  • type:Number
  • required:false
  • default:1

  Says what is a minimal width of the item. Ifw will be smaller thenminW thenw will be set tominW.

  The value is a number that is multiplied bycolWidth.

• minH

  • type:Number
  • required:false
  • default:1

  Says what is a minimal hieght of the item. Ifh will be smaller thenminH thenh will be set tominH.

  The value is a number that is multiplied byrowHeight.

• maxW

  • type:Number
  • required:false
  • default:Infinity

  Says what is a maximal width of the item. Ifw will be bigger thenmaxW thenw will be set tomaxW.

  The value is a number that is multiplied bycolWidth.

• maxH

  • type:Number
  • required:false
  • default:Infinity

  Says what is a maximal height of the item. Ifh will be bigger thenmaxH thenh will be set tomaxH.

  The value is a number that is multiplied byrowHeight

• isDraggable

  • type:Boolean
  • required:false
  • default:null

  Says if item is draggable.

  If default value isnull then it's inherited from parent.

• isResizable

  • type:Boolean
  • required:false
  • default:null

  Says if item is resizable.

  If default value isnull then it's inherited from parent.

• dragIgnoreFrom

  • type:String
  • required:false
  • default:'a, button'

  Says which elements of the item shouldn't trigger drag event of the item.

  The value iscss-like selector string.

  For more info please refer toignoreFrom ininteract.js docs.

• dragAllowFrom

  • type:String
  • required:false
  • default:null

  Says which elements of the item should trigger drag event of the item.

  The value iscss-like selector string.

  Ifnull then one can drag by any (excludingdragIgnoreFrom) element of the item.

  For more info please refer toallowFrom ininteract.js docs.

• resizeIgnoreFrom

  • type:String
  • required:false
  • default:'a, button'

  Says which elements of the item shouldn't trigger resize event of the item.

  The value iscss-like selector string.

  For more info please refer toignoreFrom ininteract.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 examplehere

<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-updated="layoutUpdatedEvent"><grid-itemv-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>

• 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.

• Basic grid layout
• Responsive
• Draggable grid items
• Resizable grid items
• Static elements
• Min/max w/h per item