クリックしてページの内容を変更するにはどうすればいいですか？

Question

私はこの

<paper-dialog id="view"> 
 
    <paper-tabs selected="0"> 
 
    <paper-tab on-tap="_changeList">TAB 1</paper-tab> 
 
    <paper-tab on-tap="_changeList">TAB 2</paper-tab> 
 
    <paper-tab on-tap="_changeList">TAB 3</paper-tab> 
 
    </paper-tabs> 
 
    <iron-list>some story for tab 1</iron-list> 
 
    <iron-list>some story for tab 2</iron-list> 
 
    <iron-list>some story for tab 3</iron-list> 
 
</paper-dialog>

のような紙のタブを持っていると私はタブごとに異なる鉄のリストを持っています。最初のタブは選択されますが、ユーザーが別のタブをクリックすると、選択したタブのコンテンツが変更されるはずです。 _changeList関数は、別のデータを持って来るでしょう。私はこれをどのように達成することができますか？

Answer 1

paper-tabsのselectedプロパティでiron-pagesのselectedプロパティが選択されたタブに基づいて対応するように表示されます。あなたはdefalutによる最初のタブを表示したいと

<paper-dialog id="view"> 
    <paper-tabs selected="{{currentPage}}"> 
     <paper-tab on-tap="_changeList">TAB 1</paper-tab> 
     <paper-tab on-tap="_changeList">TAB 2</paper-tab> 
     <paper-tab on-tap="_changeList">TAB 3</paper-tab> 
    </paper-tabs> 
    <iron-pages selected="{{currentPage}}"> 
     <iron-list>some story for tab 1</iron-list> 
     <iron-list>some story for tab 2</iron-list> 
     <iron-list>some story for tab 3</iron-list> 
    </iron-pages> 
</paper-dialog> 

、あなたが0

ready: function(){ 
    this.currentPage = 0; 
} 

希望にcurrentPage値を設定する必要があり、この、その作業をMr.7 @ :)