更改显示点击数据绑定的纸标签 - Polymer

Question

我想在边栏上的按钮被 selected 时动态更改页面中显示的纸标签。

即。（selection | 要显示的标签）

专家 | 3 个标签

管理员 | 4 个标签

等等

当我 select 选项卡本身与可滚动对话框中显示的数据有关时，我已经设法使数据绑定工作，我只是坚持这一点。

页面-tabs.html

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

感谢任何帮助。

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>

并且，让你的侧边栏 select-able 可能 <iron-selector>、https://www.webcomponents.org/element/PolymerElements/iron-selector

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

更改显示点击数据绑定的纸标签 - Polymer

Change which paper-tabs displayed on-click data binding - Polymer

html

javascript

tabs

polymer