クリック時のデータバインディングで表示される用紙タブの変更 - ポリマー

Question

サイドバーのボタンが選択されているときに、自分のページに表示される用紙タブを動的に変更したいと考えています。

ie。 （選択する|表示するタブ）

エキスパート| 3個のタブ

管理者| 4つのタブ

が

私はスクロールダイアログ内に表示されるデータに関してで、タブ自身を選択すると、作業をデータバインディングを取得するために管理しているなど、私はちょうどこの上で立ち往生しています。すべてのヘルプは高く評価され

<!-- THIS IS STILL A PRETTY BASIC EXAMPLE --> 
<paper-tabs selected="{{selected}}" noink> 
    <paper-tab link> 
     <a href="#tab1" tabindex="-1">TAB 1</a> 
    </paper-tab> 
    <paper-tab link> 
     <a href="#tab2" tabindex="-1">TAB 2</a> 
    </paper-tab> 
    <paper-tab link> 
     <a href="#tab3" tabindex="-1">TAB 3</a> 
    </paper-tab> 
</paper-tabs> 

<iron-pages selected="{{selected}}"> 
    <div>CONTENT OF PAGE 1</div> 
    <div>CONTENT OF PAGE 2</div> 
    <div>CONTENT OF PAGE 3</div> 
</iron-pages> 

サイド内容でbar.html

<div class="drawer-content vertical layout" id="drawer"> 

     <div class="userItemInfo horizontal layout"> 
     <img id="avatar" class="userAvatar" src="../images/hipster.png" slot="item-icon"></img> 
     <div class="userDetails vertical layout" id="userDetails"> 
      <div class=username>USERNAME</div> 
      <div class="subheader">further function</div> 
     </div> 
     </div> 

     <paper-icon-item on-click="{{homePage}}"> 
     <iron-icon icon="home" slot="item-icon"></iron-icon> <span>Home</span> 
     </paper-icon-item> 
     <paper-icon-item on-click="{{expertPage}}"> 
     <iron-icon icon="done" slot="item-icon"></iron-icon> <span>Expert</span> 
     </paper-icon-item> 
     <paper-icon-item on-click="{{searchBar}}"> 
     <iron-icon icon="search" slot="item-icon"></iron-icon> <span>Search</span> 
     </paper-icon-item> 
     <paper-icon-item on-click="{{adminPage}}"> 
     <iron-icon icon="supervisor-account" slot="item-icon"></iron-icon> <span>Admin</span> 
     </paper-icon-item> 
     <div class="flex"></div> <!-- THIS IS THE ONLY WAY THAT I COULD GET THE LAST ENTRY TO BE FLEXED TO THE BOTTOM --> 
     <paper-icon-item on-click="{{settingsPage}}"> 
     <iron-icon icon="settings" slot="item-icon"></iron-icon> <span id="">Settings</span> 
     </paper-icon-item> 

    </div> 

ページ-tabs.html。

Answer 1

あなたは、例えば、<iron-pages>を使用してタブページを管理することができます

<iron-pages selected="[[page]]"> 
    <!-- Expert | 3 tabs --> 
    <page-tabs-expert></page-tabs-expert> 
    <!--- Admin | 4 tabs --> 
    <page-tabs-admin></page-tabs-admin> 
    <!-- etc. --> 
    <page-tabs-etc></page-tabs-etc> 
</iron-pages> 

そして、フランクに私を助けるため、あなたのサイドバーは、選択可能な多分<iron-selector>でhttps://www.webcomponents.org/element/PolymerElements/iron-selector

<iron-selector selected={{page}}>