Hi Aleem, This looks like something that could be solved quite easily with template binding, have you seen that in action yet? The docs have some good examples: https://www.polymer-project.org/docs/polymer/databinding.html#templates-with-data-binding
I'm guessing that set of <a> tags is dynamic and coming from some external source? If so you can use the "repeat" attribute in Polymer's template binding to help create your <paper-tab> elements more declaratively. No javascript required! For your max-width logic, I'd need to understand a bit more about what you are trying to accomplish. It seems to me that you should be able to get what you want with CSS/Flexbox and shouldn't need to hardcode max-widths. Hope that helps you. Good luck! --Dennis On Tuesday, January 6, 2015 8:25:05 PM UTC-8, [email protected] wrote: > > 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/99c61f64-a3e8-4680-8ba1-f1f788f337fe%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
