位置 app-drawer 在 app-header 下方

Question

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

我希望我的应用程序像 google 保持和 google 云控制台，其中应用程序 header 跨越视口的整个宽度，应用程序抽屉从下方开始。

阅读 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 属性将不起作用）。

位置 app-drawer 在 app-header 下方

Position app-drawer underneath app-header

polymer

polymer-1.0