CODEWITHSUNDEEP
javascriptjquerytabspolymergoogle-web-component
Abhay Sharma
Abhay Sharma

Reputation: 221

How to change page content by click over paper-tab?

I have paper-tabs like this

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

and i have different iron-list for each tab. First tab will be select but as user will click on other tab so content should be change for selected tab. _changeList function will be bring different data .How can i achieve this ? Please

Upvotes: 1

Views: 525

Answers (1)

Mr.7
Mr.7

Reputation: 2713

By binding paper-tabs's selected propertry with iron-pages's selected property will show the corresopnding based on selected tab.

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

As you want to show the first tab by defalut, you need to set the currentPage value to 0

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

Hope this helps :)

Upvotes: 1

Related Questions