Thanks for taking the time to respond Dennis. Inline:
On Wednesday, January 7, 2015 12:01:56 AM UTC-8, Dennis Coldwell wrote:
>
> 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?
>
The list of <a>'s is coming from whomever decides to use my custom element
code-file-set
The way I imagined people using this was that they use the code-file-set
element and put <a>'s inside. My code-file-set would render those <a>'s as
seperate "pages" in a core-pages and create tabs to allow switching between
the pages. Does that make sense?
> 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!
>
I'm not following how the "repeat" attribute helps. From my understanding,
lets say I put something like this in code-file-set:
<template repeat="{{s in salutations}}">
<li>{{s.what}}: <input type="text" value="{{s.who}}"></li>
</template>
This is from the polymer docs. Isn't salutations a JS object thats passed
into my custom element as an attribute? How would I make salutations or
some similar variable refer to all of the <a>'s that are the content of my
code-file-set?
I'm probably misunderstanding what you're saying, any chance you could
explain with a code snippet?
>
> 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/2d8c909b-8bd1-42fe-8661-b737b5d99093%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
