Binding Paper-Tabs to Core-Pages with Polymer

javascript, polymer

Solution

As of Polymer 1.0+, this is what you'll want to be using.

<link rel="import" href="components/paper-tabs/paper-tabs.html">
<link rel="import" href="components/iron-pages/iron-pages.html">

<paper-tabs selected="0">
    <paper-tab>Tab One</paper-tab>
    <paper-tab>Tab Two</paper-tab>
</paper-tabs>

<iron-pages selected="0">
    <div>Page One</div>
    <div>Page Two</div>
</iron-pages>

<script>
     var pages = document.querySelector('iron-pages');
     var tabs = document.querySelector('paper-tabs');

    tabs.addEventListener('iron-select', function() { 
        pages.selected = tabs.selected;
    });
</script>

Problem

I'm building a site with Polymer that uses paper-tabs and core-pages. The problem I'm running into is that I can not seem to get the click event for the tabs to affect the pages being shown and all content remains hidden unless I specifically select which page I want shown. So I really just want the tabs to behave the way tabs are supposed to behave. Here is my code so far: ``` <body unresolved> <paper-tabs selected="0" selectedindex="0" id="paper-tabs" > <paper-tab id="paper-tab" active>ABOUT</paper-tab> <paper-tab id="paper-tab1">PORTFOLIO</paper-tab> <paper-tab id="paper-tab2">CONTACT</paper-tab> </paper-tabs> <core-pages selected="{{$.paper-tab.selected}} " selectedindex="0" notap id="core-pages"> <about-me id="paper-tab" active> <h2 horizontal center-justified>Worldwide Jamie</h2> <p>Jamie is a Chicago-based freelance front end web developer.</p> <p>Clearly this website is <b>Under Development</b></p> <p>Come back soon to see how great your site could be</p> </about-me> <portfolio-list id="portfolio"> <!--Insert slider?--> </portfolio-list> <contact-me id="contact"> </contact-me> </core-pages> </body> </html> ``` Thanks in advance for any time and consideration.

Original source