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

时间:2015-09-05 11:28:13

标签: javascript jquery html polymer polymer-1.0

游乐场

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

我的目标

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

问题

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

我尝试了什么

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

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

结果:enter image description here

使用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对象里面尝试过各种属性(我在文档中看过)

谢谢。

1 个答案:

答案 0 :(得分:4)

您可以使用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