Question

对于使用Polymer的应用程序，我需要一个3x3网格。它不必具有响应性，因为它应始终显示在具有特定屏幕的设备上。目前这是我的网格的样子：

<div flex style="height: calc(100%/3);" horizontal layout flex>
  <div flex style="height: 100%;">content</div>
  <div flex style="height: 100%;">content</div>
  <div flex style="height: 100%;">content</div>
</div>
<div flex style="height: calc(100%/3);" horizontal layout flex>
  <div flex style="height: 100%;">content</div>
  <div flex style="height: 100%;">content</div>
  <div flex style="height: 100%;">content</div>
</div>
<div flex style="height: calc(100%/3);" horizontal layout flex>
  <div flex style="height: 100%;">content</div>
  <div flex style="height: 100%;">content</div>
  <div flex style="height: 100%;">content</div>
</div>

现在，我需要使用来自对象的内容填充它。我知道如何轻松地将3个元素的数组插入到其中一行中，但我不知道如何使用9个元素的数组填充所有9个内容区域。

<div flex style="height: calc(100%/3);" horizontal layout flex>
  <template repeat="{{category in mainCategories }}">
    <div flex style="height: 100%; background-color: {{category.color}};">{{category.text}}</div>
  </template>
</div>

这就是对象的样子（正好是3个元素，否则会搞砸了）：

Polymer('my-app', {
  mainCategories: [
    {
      "text" : "Cat 1",
      "color" : "red"
    },{
      "text" : "Cat 2 ",
      "color" : "green"
    },{
      "text" : "Cat 3",
      "color" : "yellow"
    }
  ]
});

但我希望这个mainCategories对象长度恰好是9个元素，我想用这些值填充网格。这是可能的当前设置，还是我不应该使用这样的网格系统？

Answer 1

非响应式网格布局不是聚合物的设计目标，但是您可以在此处使用的定制聚合物组件：

https://github.com/Polymer/core-layout-grid

这是一个核心组件，可以直接使用，也可以由您自己创建的自定义组件继承。 Demo.Html显示了一个从Core-Grid创建的控件示例。

具有固定行和列的聚合物网格

1 个答案: