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

Question

Playground

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

我的目标

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

问题

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

我尝试过的

在 circles-page.html 中直接向 div 圆 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 控制台中)

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

谢谢。

Answer 1

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

要水平放置所有圆圈，请将水平布局应用于父级。然后你只需要在 child div 上使用 center-center horizo​​ntal 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从这里开始。