ポリマーアプリ引き出しのトグルが大きな画面で機能しない

Question

ポリマーアプリの引き出しはモバイル画面では機能していますが、大きな画面では切り替えることはできません。

<app-drawer-layout fullbleed force-narrow> 
    <app-drawer id="drawer" slot="drawer" swipe-open> 
    <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> 
    </iron-selector> 
    </app-drawer> 

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

    <app-header class="mainHeader" fixed slot="header" reveals effects="blend-background waterfall"> 
     <app-toolbar> 
      <div main-title> 
      Title 
      </div> 
      <span class="username">USER</span> 
      <paper-button class="logout">Signout</paper-button> 
     </app-toolbar> 
    </app-header> 
    </app-header-layout> 
</app-drawer-layout> 

なぜこれが機能しないのでしょうか？

Answer 1

引き出しを切り替えるメニューアイコンはありません。あなたのヘッダーにこれを追加します。

<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button> 

完全なコードは以下のようになります：

<app-drawer-layout fullbleed force-narrow> 
    <app-drawer id="drawer" slot="drawer" swipe-open> 
    <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> 
    </iron-selector> 
    </app-drawer> 

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

    <app-header class="mainHeader" fixed slot="header" reveals effects="blend-background waterfall"> 
     <app-toolbar> 
      <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button> 
      <div main-title> 
      Title 
      </div> 
      <span class="username">USER</span> 
      <paper-button class="logout">Signout</paper-button> 
     </app-toolbar> 
    </app-header> 
    </app-header-layout> 
</app-drawer-layout>