0

我正在尝试使用 app-toolbars 和 paper-tabs 使用 Polymer 2.0 RC 构建一个基本工具栏。我根据文档创建了标题，并为底部的应用程序工具栏添加了纸张选项卡，但它们不可见。

  • 我正确导入了所有元素
  • 我试图将第二个应用工具栏的高度设置为 100%
  • 我试图只在主文档中使用纸制标签，但它们也没有显示
  • 它不适用于 chrome 或 FF

任何帮助表示赞赏！谢谢！

我的代码：

<app-drawer-layout fullbleed>
  <!-- app-headers -->
  <app-header-layout has-scrolling-region>
    <app-header slot="header" fixed shadow condenses effects="waterfall">
      <app-toolbar id="topbar">
        <paper-icon-button icon="app-icons:menu" drawer-toggle></paper-icon-button>
        <div main-title>WASC Hosting</div>
        <paper-icon-button icon="app-icons:code"></paper-icon-button>
        <paper-icon-button icon="app-icons:search"></paper-icon-button>
        <paper-progress value="10" indeterminate bottom-item></paper-progress>
      </app-toolbar>
      <app-toolbar>
        <paper-tabs selected="0">
          <paper-tab>Food</paper-tab>
          <paper-tab>Food</paper-tab>
          <paper-tab>Food</paper-tab>
        </paper-tabs>
      </app-toolbar>
    </app-header>

    <!-- view contents -->
    <iron-pages selected="[[page]]" attr-for-selected="name" fallback-selection="view-404" role="main">
      <wasc-view-main name="main" class="content"></wasc-view-main>
      <wasc-view-console name="console" class="content"></wasc-view-console>
      <wasc-view-products name="products" class="content"></wasc-view-products>
    </iron-pages>

  </app-header-layout>
</app-drawer-layout>
4

1 回答 1

2

查看Polymer 2.0 安装文档。

您是否正确安装了带凉亭的纸质标签？

bower install --save PolymerElements/paper-tabs#2.0-preview

看看我的 bower.json：

"dependencies": {
    "app-layout": "PolymerElements/app-layout#2.0-preview",
    "app-route": "PolymerElements/app-route#2.0-preview",
    "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
    "iron-icon": "PolymerElements/iron-icon#2.0-preview",
    "iron-media-query": "PolymerElements/iron-media-query#2.0-preview",
    "iron-pages": "PolymerElements/iron-pages#2.0-preview",
    "iron-selector": "PolymerElements/iron-selector#2.0-preview",
    "paper-icon-button": "PolymerElements/paper-icon-button#2.0-preview",
    "paper-tabs": "PolymerElements/paper-tabs#2.0-preview"
    "polymer": "Polymer/polymer#^2.0.0-rc.1",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.4"
},
"resolutions": {
    "polymer": "^2.0.0-rc.1"
},
于 2017-04-27T11:17:03.267 回答