Question

HTML from the core-layout-grid-example包括：

<core-layout-grid nodes="{{nodes}}" layout="{{layout}}"></core-layout-grid>
<panel id="toolbar">toolbar (click to rotate)</panel>
<panel id="sidebar">sidebar</panel>
<panel id="workspace">workspace</panel>
<panel id="outputToolbar">otherbar</panel>
<panel id="output">
  output
  <h2>Documentation</h2>
  <h1>Verbiage</h1>
  <p>In backbone record integer LED amplified internet protocol a extension reflective. 
  Array kilohertz LED. Wavelength extension patch supporting wave an by prompt.</p>
</panel>

demo example包含以下代码：

Polymer('grid-test', {
  arrangements: [[
    [1, 1, 1, 1],
    [2, 3, 3, 4],
    [2, 3, 3, 5]
  ], [
    [4, 3, 2],
    [5, 3, 2],
    [5, 1, 1]
  ], [
    [1, 1],
    [2, 3],
    [4, 3]
  ]],

  outputLayout: 0,

  ready: function() {
    this.outputLayoutChanged();
  },

  outputLayoutChanged: function() {
    this.layout = this.arrangements[this.outputLayout];
  },

  toggleLayout: function() {
    this.outputLayout = (this.outputLayout + 1) % this.arrangements.length;
  },

  rotate: function() {
    this.toggleLayout();
  }
});

我们如何解释上面显示的矩阵？

Answer 1

来自https://groups.google.com/forum/#!topic/polymer-dev/pFYsYExD2VY

的多米尼克

布局属性基本上是您希望如何完成布局的图片。例如：

[[2, 2, 2],
 [1, 3, 3],
 [1, 3, 3]]

1表示第一个孩子，2表示第二个孩子等。您可以想象图片的边缘是粘性的，并且元素随之伸展。最简单的事情就是玩它，它会有意义。

更新：上面的代码有多个矩阵作为演示，因此用户可以旋转各种布局来查看效果。

理解Polymer的核心布局网格排列数据结构

1 个答案: