Binding Paper-Tabs a Core-Pages con Polymer

Sto costruendo un sito con Polymer che utilizza schede di carta e pagine core. Il problema che sto incontrando è che non riesco a ottenere l'evento click per le schede per influenzare le pagine mostrate e tutto il contenuto rimane nascosto a meno che non selezioni in modo specifico la pagina che voglio mostrare.
Quindi voglio solo che le schede si comportino come dovrebbero comportarsi le schede.Binding Paper-Tabs a Core-Pages con Polymer

Ecco il mio codice finora:

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

Grazie in anticipo per qualsiasi tempo e considerazione.

fonte

2014-07-11 worldwidejamie

Sembra che ci siano molte risposte alla tua domanda. Se la tua domanda ha avuto risposta puoi accettarne una come risposta. Basta fare clic sul segno di spunta. –

Come di Polymer 1.0+ , questo è quello che vorresti usare.

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

fonte

2015-10-21 18:37:52

mantenendo 'selezionato = {{selezionato}}' in entrambe le schede, le pagine vincolano la selezione. Puoi suggerire come impostare la pagina selezionata predefinita al momento del rendering all'inizio –

@sivatumma, vedi qui per un esempio: https://github.com/Download/polymer-cdn/blob/master/lib/paper-tabs/demo /tabs-with-content-example.html – Pooven

L'associazione su <core-pages> non è stata valutata poiché l'associazione dati è impostata solo per le definizioni all'interno di un modello .

Il polimero ha uno speciale modello "auto-vincolante" che deve essere inserito nella pagina principale e fornire l'associazione dati per gli elementi di livello superiore.

Maggiori informazioni: http://www.polymer-project.org/docs/polymer/databinding-advanced.html#bindingoutside

fonte

2014-07-11 06:25:12 dfreedm

Per sfruttare l'associazione dei dati al di fuori di un , inserire i propri elementi all'interno di un elemento auto-binding

Binding Paper-Tabs a Core-Pages con Polymer

risposta

Problemi correlati