纸张标签聚合物元素不适用于工具栏答案

【问题标题】：paper-tabs polymer element not working with tool-bar纸张标签聚合物元素不适用于工具栏
【发布时间】：2016-11-15 06:01:22
【问题描述】：

我正在制作一个带有聚合物元素的 spring-boot webapp，使用的界面类似于 vaadin https://demo.vaadin.com/expense-manager/ 的这个费用管理器应用程序，

我无法让纸制标签在我的工具栏上工作，它没有实现标签，只是将标签打印为文本这是我的代码：

  <paper-header-panel>
    <paper-toolbar class="medium-tall">
        <h1>iAnalyse</h1>
        <iron-icon id="sync" icon="notification:sync" hidden$="[[_hideSyncIcon(status)]]" title="Syncing…"></iron-icon>
        <span class="flex"></span>
        <paper-button on-tap="_openInfoWindow" class="about-button">Info</paper-button>
        <paper-button on-tap="_logout" class="logout-button">Quit</paper-button>

        <paper-tabs selected ="0" class="bottom self-end" style="width: 300px;">
          <paper-tab> TEST </paper-tab>
          <paper-tab> TEST2 </paper-tab>
        </paper-tabs>
  </paper-toolbar>

  <div class="content">
    <filters-toolbar id="filters-toolbar" total-owed="[[totalOwed]]" merchants="[[merchants]]" filters="{{filters}}" teams="[[teams]]"></filters-toolbar>
    <content-panel id="content-panel" filters="{{filters}}" total-owed="[[totalOwed]]" teams="[[teams]]"></content-panel>
  </div>
</paper-header-panel>

这是我在 chrome 上打开应用时的外观

【问题讨论】：

标签： java spring web web-applications polymer

【解决方案1】：

可能的原因：缺少导入

我将您的代码复制到 plunker 中，它对我来说工作正常。

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/components/paper-tabs/paper-tabs.html">
<link rel="import" href="https://polygit.org/components/paper-toolbar/paper-toolbar.html">
<dom-module id='my-tabs'>
  <template>
    <paper-toolbar class="medium-tall">
      <h1>iAnalyse</h1>
      <iron-icon id="sync" icon="notification:sync" hidden$="[[_hideSyncIcon(status)]]" title="Syncing…"></iron-icon>
      <span class="flex"></span>
      <paper-button on-tap="_openInfoWindow" class="about-button">Info</paper-button>
      <paper-button on-tap="_logout" class="logout-button">Quit</paper-button>

      <paper-tabs selected="0" class="bottom self-end" style="width: 300px;">
        <paper-tab>TEST</paper-tab>
        <paper-tab>TEST2</paper-tab>
      </paper-tabs>
    </paper-toolbar>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'my-tabs'
  })
</script>

<my-tabs></my-tabs>

【讨论】：