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

Question

游乐场

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

我的目标

我设法复制了this动画，但我也需要它来播放内容（文字和图片）。

问题

插入内容 - 我一直在尝试仅添加文字，但我无法让它发挥作用。

我尝试了什么

将内容直接添加到 circles-page.html 中的div circle div容器，它无法正常工作。

<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 。然后，您只需在子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。