Hi all,
Sorry for the newbie question but I'm creating my first element. I'm trying
to create an element which has a dynamic number of tabs depending on what
content is given to the element. The only way I've figured out how to do
this is in JS but I have a feeling this isn't the Polymer way, what am I
missing? Can you point me to some docs or other elements that will help me
get started?
here's what I have so far:
<code-file-set>
<a href="#" tabTitle="onelink">onelink</a>
<a href="#" tabTitle="twolink">twolink</a>
<a href="#" tabTitle="threelink">threelink</a>
</code-file-set>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/core-pages/core-pages.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<polymer-element name="code-file-set">
<template>
<paper-tabs style="max-width:{{tabBarWidth}}px" id="tabs"
selected={{selected}}>
</paper-tabs>
<core-pages selected="{{selected}}">
<content id="codecontent" select="a"></content>
</core-pages>
</template>
<script>
Polymer('code-file-set', {
domReady: function() {
var codeNodes = this.$.codecontent.getDistributedNodes();
for (var i = 0; i < codeNodes.length; i++) {
var name = codeNodes[i].getAttribute('tabTitle');
var tab = document.createElement('paper-tab');
tab.innerHTML = name;
this.$.tabs.appendChild(tab);
}
this.selected = 0;
this.tabBarWidth = codeNodes.length * 250;
},
});
</script>
</polymer-element>
This works, but it seems ugly. Namely, can creating the tabs not be done in
JS but in a more declarative way in the HTML (notice that I create one tab
per <a> element found in the content). Similarly for the width of the max
width of the paper tabs.
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/558579ef-e0fb-47a8-939d-52ea50e9553f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
