Polymer 应用程序抽屉在关闭时留下悬挂的包装纸，内容不会占用全部 space

Question

我正在尝试构建一个布局类似于 youtube web (www.youtube.com) 的应用程序，这是我的代码：

      <app-drawer-layout>

        <app-drawer id="menuDrawer" slot="drawer">
          <div class="drawer-contents">
            <paper-icon-item>
              <iron-icon icon="inbox" item-icon slot="item-icon"></iron-icon>
              <span>inbox</span>
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="favorite" item-icon slot="item-icon"></iron-icon>
              <span>favorite</span>
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="polymer" item-icon slot="item-icon"></iron-icon>
              <span>polymer</span>
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="question-answer" item-icon slot="item-icon"></iron-icon>
              <span>question-answer</span>
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="send" item-icon slot="item-icon"></iron-icon>
              <span>send</span>
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="archive" item-icon slot="item-icon"></iron-icon>
              <span>archive</span>
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="backup" item-icon slot="item-icon"></iron-icon>
              <span>backup</span>
            </paper-icon-item>
            <paper-icon-item>
              <iron-icon icon="dashboard" item-icon slot="item-icon"></iron-icon>
              <span>dashboard</span>
            </paper-icon-item>
          </div>
        </app-drawer>

        <app-toolbar>
          <paper-icon-button id="menuButton" icon="menu" on-tap="_onToggle"></paper-icon-button>
        </app-toolbar>

        <div id="navigationMap" style="width: 100%; height: 500px;"></div>

      </app-drawer-layout>

更完整的代码位于 jsbin：https://jsbin.com/sizeruducu/edit?html,output。我遇到了一些问题：

只要点击切换按钮，左边的应用程序抽屉就会消失，但没有包装，这会使右边的内容挂在右边。不像youtube web，每当我试图点击左上角的菜单按钮时，它会隐藏菜单抽屉，右边的内容会填满左边的所有内容space。
我的 google 地图无法适应所有 space，即使我试图将其更改为 100% 高度，它也无法适应。我想让它占据所有 space （宽度和高度）。

任何评论和回答将不胜感激，谢谢。

Answer 1

需要进行以下更改：

切换函数隐藏 drawer:

_onToggle() {
    //this.$.menuDrawer.toggle();
    var drawerLayout = this.$.drawerLayout;
    if (drawerLayout.forceNarrow || !drawerLayout.narrow) {
      drawerLayout.forceNarrow = !drawerLayout.forceNarrow;

    } else {
      drawerLayout.drawer.toggle();
    }
}

您必须更改 app-drawer-layout 的布局，而不是切换 app-drawer。

app-drawer-layout:

<app-drawer-layout force-narrow id="drawerLayout" fullbleed >

fullbleed 属性将使其适合其容器的大小。 force-narrow 属性强制按照您的意愿制作窄布局是。

更改导航高度：

this.$.navigationMap.style.height = window.innerHeight+'px';

Demo

如果你想让它像youtube. Click here。

app-drawer-layout的responsiveWidth属性默认值为640px，所以必须在jsbin中增加output的width。

Polymer 应用程序抽屉在关闭时留下悬挂的包装纸，内容不会占用全部 space

Polymer app-drawer left hanging wrapper when closed & content not take up all space

html

javascript

gmaps.js

polymer-2.x