Preseleziona una pagina predefinita in ferro-pagine quando si utilizza con le schede di carta

Question

Sto usando Polymer iron-pages insieme a paper-tabs nella mia app di rotaie. Il problema è che nessuna delle pagine è stata mostrata fino a quando non è stato fatto clic su uno degli paper-tabs. Voglio che la prima pagina di iron-pages sia selezionata per impostazione predefinita senza interazione dell'utente.

Ho inserito sia paper-tabs e iron-pages in un <template is='dom-bind'></template>. Ho letto la documentazione sull'associazione dei dati, ma non sono riuscito a capire come ottenere ciò. Per favore qualcuno suggerisca i vostri preziosi suggerimenti. Grazie.

<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

Dal momento che si sta lavorando con un modello di auto-vincolante, è sufficiente aggiungere un breve script che imposta la proprietà selected del vostro elemento <iron-pages> al momento del caricamento. Per esempio (supponendo che si sta utilizzando webcomponents-lite.js):

<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

Se si utilizza polimeri è anche possibile impostare la visualizzazione predefinita definendo nelle proprietà del polimero del componente web:

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

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

Answer 3

Utilizzare il il costruttore di elemento personalizzato() per impostare la proprietà al nome della scheda che deve essere selezionata

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

.....

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

.....

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