将应用程序抽屉放置在应用程序标题下方

使用入门工具包 2 中的模板，是否可以将应用程序抽屉置于app-header？现在，应用程序抽屉从视口顶部开始，并在旁边列化app-header.

我希望我的应用程序像 google keep 和 google cloud console 一样，其中应用程序标题跨越视口的整个宽度，应用程序抽屉从下面开始。

阅读元素目录后app-layout，我没有看到官方 api/attribute 来设置这个。我尝试了一些方法但没有成功：

<app-drawer-layout fullbleed>
  <!-- Drawer content -->
    <app-header condenses reveals effects="waterfall">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div main-title>My App</div>
      </app-toolbar>
    </app-header>

  <app-drawer>
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
      <a name="view1" href="/view1">View One</a>
      <a name="view2" href="/view2">View Two</a>
      <a name="view3" href="/view3">View Three</a>
    </iron-selector>
  </app-drawer>

基本上你需要使用app-drawer-layout里面一个app-header-layout.

这里有一个JSBin http://jsbin.com/baqumi/edit?html,output与所需的布局。

以及代码本身：

<dom-module id="test-app">
  <template>

    <style>

      :host {
        display: block;
        --app-primary-color: #3F51B5;
      }

      app-header {
        background-color: var(--app-primary-color);
        color: white;
      }

      app-drawer {
        top: 64px;
        --app-drawer-content-container: {
          padding: 0px;
          background-color: #eee;
        };
      }

    </style>

    <app-header-layout fullbleed>
      <app-header fixed shadow>
        <app-toolbar id="toolbar">
          <paper-icon-button icon="menu" on-tap="_onTap"></paper-icon-button>
          <div main-title>Stormwind</div>
        </app-toolbar>
      </app-header>
      <app-drawer-layout>
        <app-drawer id="drawer">
          drawer content
        </app-drawer>
        <div>
          main content
        </div>
      </app-drawer-layout>
    </app-header-layout>

  </template>
  <script>
    Polymer({

      is: 'test-app',

      properties: {

      },

      ready: function() {

      },

      attached: function() {

      },

      _onTap: function() {
        this.$.drawer.toggle();
      }

    });
  </script>
</dom-module>

NOTE

您需要手动处理抽屉按钮（drawer-toggle属性将不起作用）。