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

Question

使用初学者工具包 2 中的模板，是否可以将应用程序抽屉置于 app-header 下方？现在，应用程序抽屉从视口(viewport)顶部开始，列在 app-header 旁边。

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

在阅读了 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>

Answer 1

基本上，您需要在 app-header-layout 中使用 app-drawer-layout。

这是一个JSBin具有所需的布局。

以及代码本身:

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

注意

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