Polymer 应用程序抽屉切换在大屏幕上不起作用

Question

Polymer 应用程序抽屉在移动屏幕上工作，但在大屏幕上不切换。

  <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

您没有用于切换抽屉的菜单图标。将此添加到您的 header:

<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>

Polymer 应用程序抽屉切换在大屏幕上不起作用

Polymer app drawer toggle is not working in big screens

polymer