Voreinstellung einer Standardseite in Eisen-Seiten bei Verwendung mit Papier-Tabs

Question

Ich verwende Polymer iron-pages zusammen mit paper-tabs in meiner Schiene App. Das Problem ist, dass keine der Seiten angezeigt wurde, bis einer der paper-tabs angeklickt wurde. Ich möchte die erste Seite in iron-pages standardmäßig ohne Benutzerinteraktion ausgewählt werden.

Ich habe beide paper-tabs und iron-pages in eine <template is='dom-bind'></template> setzen. Habe die Dokumentation über Datenbindung gelesen, aber ich konnte nicht herausfinden, wie das geht. Bitte jemand schlägt deine wertvollen Vorschläge vor. Vielen Dank.

<template is="dom-bind"> 
    <div class="middle"> 
    <paper-tabs class="bottom self-end" selected="{{selected}}"> 
     <paper-tab>Page 1</paper-tab> 
     <paper-tab>Page 2</paper-tab> 
    </paper-tabs> 
    </div> 
    <div class="bottom"> 
    <iron-pages selected="{{selected}}"> 
     <div> Page 1(This should be selected by default.) 
     </div> 
     <div> Page 2 
     </div> 
    </iron-pages> 
    </div> 
</template> 

Answer 1

Da Sie mit einer Auto-Bindungsvorlage arbeiten, einfach ein kurzes Skript hinzufügen, die die selected Eigenschaft Ihres <iron-pages> Element zur Ladezeit setzt. Zum Beispiel (vorausgesetzt, Sie webcomponents-lite.js verwenden):

<template is="dom-bind"> 
    <div class="middle"> 
    <paper-tabs class="bottom self-end" selected="{{selected}}"> 
     <paper-tab>Page 1</paper-tab> 
     <paper-tab>Page 2</paper-tab> 
    </paper-tabs> 
    </div> 
    <div class="bottom"> 
    <iron-pages selected="{{selected}}"> 
     <div> Page 1 (This will be selected by default.) 
     </div> 
     <div> Page 2 
     </div> 
    </iron-pages> 
    </div> 
</template> 

<script> 
    document.addEventListener('WebComponentsReady', function() { 
    var template = document.querySelector('template[is="dom-bind"]'); 
    template.selected = 0; // selected is an index by default 
    }); 
</script> 

Answer 2

Wenn Sie Polymer verwenden, können Sie auch die Standardansicht festlegen, indem sie in den Polymereigenschaften Ihrer Web-Komponente definieren:

Polymer({ 
    is: 'your-web-component', 

    properties: { 
    selected: { 
     value: 0 
    } 
    } 
}); 

Answer 3

Nutzung der benutzerdefinierte Element Konstruktor() die Eigenschaft Name der Registerkarte festlegen, die

<paper-tabs id="choiceTab" style="width:400px;" attr-for-selected='name' selected="{{choice}}"> 
        <paper-tab name="tab1">Tab 1</paper-tab> 
        <paper-tab name="tab2">Tab 2</paper-tab> 

       </paper-tabs> 

.....

ausgewählt werden sollte

static get properties() { 
      return { 
       choice: { 
        type: String, 
        reflectToAttribute: true 
       } 
      }; 
     } 

.....

constructor() { 
       super(); 
       this.choice = 'tab1'; 
      }