370 lines
7.7 KiB
Markdown
370 lines
7.7 KiB
Markdown
# 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](#responsive), [breakpoints](#breakpoints) and [cols](#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](#responsivelayouts), [breakpoints](#breakpoints) and [cols](#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](#responsivelayouts) and [cols](#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](http://interactjs.io/docs/#ignorable-selectors).
|
|
|
|
### 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](http://interactjs.io/docs/#ignorable-selectors).
|
|
|
|
### 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](http://interactjs.io/docs/#ignorable-selectors).
|
|
|
|
|
|
### 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](https://interactjs.io/docs/draggable/)
|
|
|
|
### resizeOption
|
|
|
|
* type: `Object`
|
|
* required: `false`
|
|
* default: `{}`
|
|
|
|
Passthrough object for the grid item [interact.js resizable configuration](https://interactjs.io/docs/resizable/)
|
|
|