将应用程序抽屉放在应用程序标题下方 [英] Position app-drawer underneath app-header

问题描述

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

Using the template from starter kit 2, is it possible to have the app drawer below the app-header? Right now the app drawer starts from the top of viewport and is columnized next to app-header.

我希望我的应用程序像Google Keep和Google Cloud Console一样，其中应用程序标题跨越视口的整个宽度，并且应用程序抽屉从下面开始.

I would like my app to be like google keep and google cloud console where the app header spans the entire width of the viewport and the app drawer begins underneath.

阅读app-layout的元素目录后，我没有看到官方的api/属性来进行设置.我尝试了几件事但没有成功:

After reading the element catalog for app-layout, I did not see a offical api/attribute to set this. I've tried a few things but no success:

<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-header-layout内使用app-drawer-layout.

Basically you need to use an app-drawer-layout inside an app-header-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属性不起作用).

You need to manually handle the drawer button (the drawer-toggle property won't work).

这篇关于将应用程序抽屉放在应用程序标题下方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！