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

可以通过在 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 下的“布局”。这是链接 - https://resources.jointjs.com/docs/rappid/v2.3/ui.html#ui.Stencil

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