polymer - 如何使用带有聚合物元素的包装？

Question

我一直在寻找如何将包装与聚合物元素结合使用几个小时。我想要实现的是一个作为内容列表的元素，其中包含一个作为内容项的元素。我想将内容项目“打包”。

澄清：

<packery-element>
<template repeat="{{item in items}}">
<content-item class="item"></content-item>
</template>
</packery-element>

Answer 1

我们创建了自己的自定义元素，它也使用了 bin-packing 算法: <juicy-tile-list>: http://juicy.github.io/juicy-tile-list/

然后，您只需要：

<link rel="import" href="../juicy-tile-list/dist/juicy-tile-list.html">
...
<juicy-tile-list>
  <div>Some</div>
  <div>tiles</div>
  <section>here</section>
</juicy-tile-list>

我们非常专注于这个的开发，所以如果有任何问题，请填写GH issue。我们将非常感谢任何反馈。

我们用几个额外的特性扩展了它，比如：

• 优先项目，
• 分组为虚拟的嵌套容器，
• 在不同的方向/方向上对齐，
• 动态改变大小，
• 自动调整容器大小，
• 瓷砖之间的间隙/排水沟/单元间距，
• 适应窗口大小的变化。

并创建了两个侧面组件：

• <juicy-tile-grid>- 使用原生 CSS 网格布局的自适应特性，
• <juicy-tile-editor>使摆弄瓷砖更容易。

我们还计划将核心 Masonry/Packery 之类的行为与所有附加功能分开，以便为那些不需要的人提供更清洁和更快的代码。

Answer 2

这是一个可能是微不足道的packery-element.html导入示例：

  <script src="http://packery.metafizzy.co/packery.pkgd.js"></script>

  <polymer-element name="packery-element" block>
    <script>
      Polymer({
        domReady: function() {
          this.packery = new Packery(this, {
            itemSelector: '*',
            gutter: 10
          });
        }
      });
    </script>
  </polymer-element>

直播http://jsbin.com/qoqati/1/edit