纸张标签聚合物元素不使用工具栏

时间:2016-07-12 20:25:56

标签: java spring web web-applications polymer

我正在制作一个带有聚合物元素的弹簧启动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上打开它时应用的外观 app

1 个答案:

答案 0 :(得分:0)

可能的原因:缺少导入

我将您的代码复制到plunker中,并且它对我来说很好。

&#13;
&#13;
<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>
&#13;
&#13;
&#13;