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

Question

Playground

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，以显示内容。

结果:未定义(在 Chrome 控制台中)

我还尝试在 Dom 准备好后使用 jQuery 添加内容，但它不起作用，我尝试过的 Polymer 对象内的各种属性也不起作用(我在文档中看到过) .

谢谢。

Answer 1

您可以使用 Polymer 的布局系统轻松实现这一点。

要水平布局所有圆圈，请将水平布局应用于父div。然后，您只需在子div上使用center-center水平布局即可将文本居中。

<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从这里开始。