CODEWITHSUNDEEP
javascriptjqueryhtmlpolymerpolymer-1.0
HouseMdd
HouseMdd

Reputation: 43

Google Polymer - how to add content to Neon elements

The playground

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

My goal

I've managed to replicate this animation, but I need it to have content as well (text and images).

The Problem

Inserting content - I've been experimenting with adding just text for now, and I cannot get it working.

What I've tried

Adding content directly to div circle div container in circles-page.html, it doesn't work properly.

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

Result: enter image description here

Getting position with jQuery, on circles-page.html (at the bottom of the page):

<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>

.. and then using that to make an invisible div above that, to display content.

Result: undefined (in Chrome Console)

I also tried using jQuery to add content once Dom is ready, but it didn't work, nor did various properties inside Polymer object I've tried (that I've seen on documentation).

Thank you.

Upvotes: 2

Views: 127

Answers (1)

Justin XL
Justin XL

Reputation: 39006

You can use Polymer's layout system to achieve this easily.

To lay out all the circles horizontally, apply horizontal layout to the parent div. Then you just need to use center-center horizontal layout on the child div to center the text.

<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>

You can read more about this iron-flex-layout from here.

Upvotes: 4

Related Questions