Google Polymer - 如何向 Neon 元素添加内容

Question

操场

http://labs.recgr.com/polymer-dev/test1.html

我的目标

我已经成功地复制了 this 动画，但我需要它也有内容（文本和图像）。

问题

插入内容 - 我目前一直在尝试只添加文本，但无法正常工作。

我试过的

将内容直接添加到div圈div容器中圈-page.html,它不能正常工作。

<div class="circle">test</div>

结果：

通过 jQuery 在 circles-page.html 上获得位置（在页面底部） :

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
    var sq_pos = $(".square");
    console.log(sq_pos.position());
});
</script>

.. 然后用它在上面制作一个不可见的 div 来显示内容。

结果：undefined（在 Chrome 控制台中）

我也试过使用jQuery在Dom准备好后添加内容，但是没有用，Polymer对象中的各种属性也没有用我试过了（我在文档中看到过）。

谢谢。

Answer 1

您可以使用 Polymer 的布局系统轻松实现此目的。

要水平布置所有圆圈，请将 horizontal layout 应用于 父级 div。然后你只需要在 child div 上使用 center-center horizontal layout 使文本居中。

<div class="horizontal layout">
  <div class="circle center-center horizontal layout">test</div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

您可以从此处阅读更多相关信息 iron-flex-layout。