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>

聚合物应用程序抽屉切换不适用于大屏幕

1 个答案: