如何增加模板列之间的间隙

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

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

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下的"layout"。这是 link - https://resources.jointjs.com/docs/rappid/v2.3/ui.html#ui.Stencil

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

如何增加模板列之间的间隙

How to increase gaps between stencil columns

javascript

jointjs

rappid