app-header内的聚合物app-drawer无法正常工作

时间:2017-12-19 06:48:35

标签: polymer polymer-2.x polymer-starter-kit

我试图将我的网页显示为文档的正文。 但是,如果我将抽屉放在标题下方,页面内容就不会显示出来。 如果我改变位置并将抽屉放在标题上方,我的页面就会显示出来。 以下是我的一段代码。

  <app-location
       route="{{route}}"
       url-space-regex="^[[rootPath]]">
   </app-location>

   <app-route
       route="{{route}}"
       pattern="[[rootPath]]:page"
       data="{{routeData}}"
       tail="{{subroute}}">
   </app-route>

     <!-- Main content -->
     <app-header-layout has-scrolling-region>

       <app-header slot="header" condenses reveals effects="waterfall">
         <app-toolbar>
           <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
           <div main-title>[[title]]</div>
         </app-toolbar>
       </app-header>

     <app-drawer-layout fullbleed narrow="{{narrow}}">
     <!-- Drawer content -->
      <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
       <app-toolbar>Menu</app-toolbar>
       <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
         <!-- <a name="view1" href="[[rootPath]]view1">View One</a> -->
         <a name="aA" href="[[rootPath]]aA">AA</a>
         <a name="bB" href="[[rootPath]]bB">BB</a>
       </iron-selector>
     </app-drawer>

       <iron-pages
           selected="[[page]]"
           attr-for-selected="name"
           role="main">
         <a-a name="aA" title="{{title}}"></a-a>
         <b-b name="bB"  title="{{title}}"></b-b>
       </iron-pages>
        </app-drawer-layout>
     </app-header-layout>
 </template>

1 个答案:

答案 0 :(得分:1)

<app-drawer-layout>应位于<app-drawer-layout> <app-drawer></app-drawer> <app-header-layout> <app-header> <app-toolbar></app-toolbar> </app-header> <iron-pages></iron-pages> </app-header-layout> </app-drawer-layout> 内。

{{1}}