# 属性

# GridLayout

# layout

  • type: Array
  • required: true

这是栅格的初始布局。

数据源。值必须为 Array,其数据项为 Object。 每条数据项必须有 i, x, y, w 和 h 属性。 请参考下面的 GridItem

# responsiveLayouts

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

如果 responsive 设置为 true,该配置将作为栅格中每个断点的初始布局。键值是断点名称,每项的值都是类似 layout 属性定义的数据结构,值必须为 Array,其数据项为 Object。例如: {lg: [layout items], md: [layout items]}。需要注意的是,在创建栅格布局后设置该属性无效。 在创建GridLayout之后设置prop无效。

可以查看 responsive, breakpointscols

# colNum

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

定义栅格系统的列数,其值需为自然数。

# rowHeight

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

每行的高度,单位像素。

# maxRows

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

定义最大行数。

# margin

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

定义栅格中的元素边距。

值必须是包含两个 Number的数组,数组中第一个元素表示水平边距,第二个表示垂直边距,单位为像素。

# isDraggable

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

标识栅格中的元素是否可拖拽。

# isResizable

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

标识栅格中的元素是否可调整大小。

# isMirrored

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

标识栅格中的元素是否可镜像反转。

# autoSize

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

标识容器是否自动调整大小。

# verticalCompact

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

标识布局是否垂直压缩。

# preventCollision

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

防止碰撞属性,值设置为ture时,栅格只能拖动至空白处。

# useCssTransforms

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

标识是否使用CSS属性 transition-property: transform;

# responsive

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

标识布局是否为响应式。

可以查看 responsiveLayoutsbreakpointscols

# breakpoints

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

为响应式布局设置断点。

可以查看 responsiveLayoutscols

# cols

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

设置每个断点对应的列数。

# useStyleCursor

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

标识是否使用动态鼠标指针样式。当拖动出现卡顿时,将此值设为 false也许可以缓解布局问题。 此属性无效

# GridItem

# i

  • type: String
  • required: true

栅格中元素的ID。

# x

  • type: Number
  • required: true

标识栅格元素位于第几列,需为自然数。

# y

  • type: Number
  • required: true

标识栅格元素位于第几行,需为自然数。

# w

  • type: Number
  • required: true

标识栅格元素的初始宽度,值为colWidth的倍数。

# h

  • type: Number
  • required: true

标识栅格元素的初始高度,值为rowHeight的倍数。

# minW

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

栅格元素的最小宽度,值为colWidth的倍数。

如果w小于minW,则minW的值会被w覆盖。

# minH

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

栅格元素的最小高度,值为rowHeight的倍数。

如果h小于minH,则minH的值会被h覆盖。

# maxW

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

栅格元素的最大宽度,值为colWidth的倍数。

如果w大于maxW,则maxW的值会被w覆盖。

# maxH

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

栅格元素的最大高度,值为rowHeight的倍数。

如果h大于maxH,则maxH的值会被h覆盖。

# isDraggable

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

标识栅格元素是否可拖拽。如果值为null则取决于父容器。

# isResizable

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

标识栅格元素是否可调整大小。如果值为null则取决于父容器。

# static

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

标识栅格元素是否为静态的(无法拖拽、调整大小或被其他元素移动)。

# dragIgnoreFrom

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

标识栅格元素中哪些子元素无法触发拖拽事件,值为css-like选择器。

请参考interact.js docs (opens new window)中的ignoreFrom

# dragAllowFrom

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

标识栅格元素中哪些子元素可以触发拖拽事件,值为css-like选择器。

如果值为null则表示所有子元素(dragIgnoreFrom的除外)。

请参考interact.js docs (opens new window)中的allowFrom

# resizeIgnoreFrom

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

标识栅格元素中哪些子元素无法触发调整大小的事件,值为css-like选择器。

请参考interact.js docs (opens new window)中的ignoreFrom