Question

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

我希望我的应用程序像google keep和google云控制台，其中app标题跨越视口的整个宽度，app抽屉从下面开始。

在阅读app-layout的元素目录后，我没有看到设置这个的官方api /属性。我尝试了一些但没有成功的事情：

<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-drawer-layout内使用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属性不起作用）。

将app-drawer放在app-header下面

1 个答案: