Any-Grid-Layout

Appearance

layouts ​

示例 ​

javascript
const container = new Container({
  el: '#container',
  layouts: {
    items: layoutData,
    margin: [10, 10],
    size: [120, 80],

    // 其他配置 ...
  },
})
const container = new Container({
  el: '#container',
  layouts: {
    items: layoutData,
    margin: [10, 10],
    size: [120, 80],

    // 其他配置 ...
  },
})

layouts ​

  • type1: CustomLayoutsOptions

  • type2: CustomLayoutsOption | CustomLayoutsOption[]

  • required: false

    当前的布局配置，可以是一个配置对象或者配置对象数组

layouts.items ​

  • type1: CustomItems

  • type2: CustomItem[]

  • required: false

  • default []

    当前布局使用的数据, CustomItem配置详见 Item

layouts.px ​

  • type: number

  • required: false

    使用多个layout预设布局方案请必须指定对应的像素px,单位为数字, 假设px=1024表示Container宽度1024像素以下执行该布局方案

layouts.autoGrow.vertical ​

  • type: boolean

  • required: false

  • default false

    响应式下resize和drag是否自动撑开垂直方向的容器

layouts.autoGrow.horizontal ​

  • type: boolean

  • required: false

  • default false

    响应式下resize和drag是否自动撑开水平方向的容器

layouts.col ​

  • type: number

  • required: false

  • default 1

    列数

layouts.row ​

  • type: number

  • required: false

  • default 1

    行数, 响应模式下row由引擎管理且row不可固定，用户指定的row永远不会生效

layouts.margin ​

  • type: MarginOrSizeDesc

  • required: false

  • default [null, null]


    margin = [marginX, marginY]
    该margin最终会被解析为:
    marginX = margin[0]
    marginY = margin[1]
    后面提到的所有的marginX都表示 marginX 或者 margin[0]，marginY同理

layouts.marginX ​

  • type: null | number
  • required: false
  • default null


marginX = marginLeft + marginRight
marginLeft 和 marginRight是相等的

layouts.marginY ​

  • type: null | number

  • required: false

  • default null


    marginY = marginTop + marginBottom
    marginTop 和 marginBottom是相等的

layouts.size ​

  • type: MarginOrSizeDesc

  • required: false

  • default [null, null]


    size = [sizeWidth, sizeHeight]
    该margin最终会被解析为:
    sizeWidth = size[0]
    sizeHeight = size[1]
    后面提到的所有的sizeWidth都表示 sizeWidth 或者 size[0]，sizeHeight同理

layouts.sizeWidth ​

  • type: null | number

  • required: false

  • default null


    成员宽度
    sizeWidth优先级大于 size[0]
    在sizeWidth,col,marginX都未指定的情况下将和sizeHeight大小一致

layouts.sizeHeight ​

  • type: null | number

  • required: false

  • default null


    成员高度
    sizeHeight优先级大于 size[1]
    sizeHeight,row,marginY都未指定的情况下将和sizeWidth大小一致

layouts.minCol ​

  • type: null | number

  • required: false

  • default null

    最小列数

layouts.maxCol(* Future) ​

  • type: null | number

  • required: false

  • default null

    最大列数

layouts.minRow ​

  • type: null | number

  • required: false

  • default null

    最小行数，只是限制外层容器高度，实际行数超出部分会出现滚动条

layouts.maxRow(* Future) ​

  • type: null | number

  • required: false

  • default null

    最大行数，只是限制外层容器高度，实际行数超出部分会出现滚动条

layouts.ratioCol ​

  • type: number

  • required: false

  • default 0.1


    只设置了col，而没有指定marginX和sizeWidth情况下实现col方向自动铺满,
    或者没有col只有marginX情况下， ratioCol = marginX/sizeWidth


    注意: 必须为container所挂载的元素指定宽高,且col方向没有指定size和margin才能生效

layouts.ratioRow ​

  • type: number

  • required: false

  • default 0.1


    只设置了row，而没有指定marginY和sizeHeight情况下实现row方向自动铺满,
    或者没有row只有marginY情况下， ratioRow = marginY/sizeHeight


    注意: 必须为container所挂载的元素指定宽高,且col方向没有指定size和margin才能生效

layouts.exchange ​

  • type: boolean

  • required: false

  • default false


    该容器是否允许其他容器成员进入
    和Item的exchange不同的是container的控制整个自身容器

layouts.pressTime ​

  • type: number

  • required: false

  • default 360

    触屏下长按多久响应拖拽事件,默认360ms