2017-04-27 104 views
0

我正在尝试使用应用程序工具栏和纸张选项卡来构建带Polymer 2.0 RC的基本工具栏。我根据文档创建了标题,并为底部的应用程序工具栏添加了纸张标签,但它们不可见。聚合物2;纸张不可见

  • 我正确导入的所有元素
  • 我试图第二应用,工具栏的高度设置为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> 

回答

2

Polymer 2.0 installation Documentation

您是否正确安装了带有凉亭的纸张标签?

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" 
}, 
+0

谢谢!!这解决了问题! –