Vue3 Grid Layout

Appearance

Properties ​

GridLayout ​

layout ​

  • type: Array
  • required: true

This 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 the documentation for GridItem below for more information.

responsiveLayouts ​

  • type: Object
  • required: false
  • default : {}

This is the initial layouts of the grid per breakpoint if responsive is set to true. The keys of the Object are breakpoint names and each value is an Array of Object items as defined by layout prop. eg:{ lg:[layout items], md:[layout items] }. Setting the prop after the creation of the GridLayout has no effect.

See also responsive, breakpoints and cols

colNum ​

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

Says how many columns the grid has.

The value should be a natural 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-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 ​

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

isBounded ​

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

Says if the grid items are bounded to the container when dragging

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.

restoreOnDrag ​

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

Says if the moved grid items should be restored after an item has been dragged over.

preventCollision ​

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

Says if grid items will move when being dragged over.

useCssTransforms ​

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

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

responsive ​

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

Says if the layout should be responsive to window width

See also responsiveLayouts, breakpoints and cols

breakpoints ​

  • type: Object
  • required: false
  • default: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }

Breakpoints defined for responsive layout, the parameter represents the width of different devices:lg(large), md(medium), sm(small), xs(extra small). Sets widths on wich column number changes

See also responsiveLayouts and cols

cols ​

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

Defines number of columns for each breakpoint

useStyleCursor ​

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

Says if set the styleCursor option to true. When dragging freezes, setting this value to false may alleviate problems. This property is not reactive

transformScale ​

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

Sets a scaling factor to the size of the grid items, 1 is 100%

GridItem ​

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 a whole 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 a whole number.

w ​

  • type: Number
  • required: true

Says what is a initial width of the item.

The value is a number that is multiplied by colWidth.

h ​

  • type: Number
  • required: true

Says what is a initial height of the item.

The value is a number that is multiplied by rowHeight.

minW ​

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

Says 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 ​

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

Says 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 ​

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

Says 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 ​

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

Says 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 ​

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

Says if item is draggable.

If default value is null then it's inherited from parent.

isResizable ​

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

Says if item is resizable.

If default value is null then it's inherited from parent.

isBounded ​

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

Says if the item is bounded to the container when dragging.

If default value is null then it's inherited from parent.

static ​

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

Says if item is static (won't be draggable, resizable or moved by other items).

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.

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 (excluding dragIgnoreFrom) element of the item.

For more info please refer to allowFrom in interact.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 is css-like selector string.

For more info please refer to ignoreFrom in interact.js docs.

preserveAspectRatio ​

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

If 'true', forces the GridItem to preserve its aspect ratio when resizing.

dragOption ​

  • type: Object
  • required: false
  • default: {}

Passthrough object for the grid item interact.js draggable configuration

resizeOption ​

  • type: Object
  • required: false
  • default: {}

Passthrough object for the grid item interact.js resizable configuration