javascript - 如何增加模板柱之间的间隙

Question

  this.stencil = new joint.ui.Stencil({
    paper: this.paper,
    width: 240,
    height: 500,
    label: 'Components',
    layout: {
      columnWidth: 80,
      columns: 2,
      rowHeight: 130,
    },
  });

我正在使用此代码在模具中创建两列布局。有没有办法添加任何填充或增加两列之间的间隙？

Answer 1

可以通过在配置中分别设置水平dx和dy垂直间隙的属性来完成layout-

this.stencil = new joint.ui.Stencil({
    paper: this.paper,
    width: 240,
    height: 500,
    label: 'Components',
    layout: {
      columnWidth: 80,
      columns: 2,
      rowHeight: 130,
      dy: 10,
      dx: 10,
      deep: true
    },
  });

你可以改变它的值dx并dy达到你真正想要的差距。

您可以参考 ui.Stencil 下的“布局”。这是链接 - https://resources.jointjs.com/docs/rappid/v2.3/ui.html#ui.Stencil

布局配置的说明可在 - https://resources.jointjs.com/docs/rappid/v2.3/layout.html#layout.GridLayout