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

使用starter kit 2中的模板，是否可以将应用程序抽屉置于

应用程序标题下方

？现在，应用程序抽屉从视口顶部开始，列在

应用程序标题

旁边

我希望我的应用程序像google keep和google cloud控制台一样，应用程序标题横跨整个视口宽度，应用程序抽屉从下面开始

在阅读了

应用程序布局的元素目录之后，我没有看到用于设置该布局的官方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>



基本上，您需要在
应用程序标题布局中使用
应用程序抽屉布局

下面是一个具有所需布局的示例

代码本身：

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


：主持人{
显示：块；
--app原色：#3F51B5；
}
应用程序标题{
背景色：var（--app原色）；
颜色：白色；
}
应用程序抽屉{
顶部：64px；
--应用程序抽屉内容容器：{
填充：0px；
背景色：#eee；
};
}
暴风城
抽屉内容
主要内容
聚合物({
是：“测试应用程序”，
特性：{
},
就绪：函数（）{
},
附：函数（）{
},
_onTap:function（）{
此.drawer.toggle（）；
}
});

注意

您需要手动操作抽屉按钮（抽屉开关属性不起作用）。
太酷了，谢谢！出于某种原因，我认为
应用程序抽屉布局
必须始终是所有内容的父容器。很好。是的，我也喜欢这种布局。如果你想使用一些更大的页眉效果，它会像滚动一样压缩，这意味着什么？我想应用程序抽屉必须像谷歌收件箱一样上下移动？@Rhys你说得对，使用那些
应用程序标题
效果也需要修改抽屉。我可以想象，根据应用程序标题的位置和状态，用某种动画移动抽屉。检查
app header
documentation（），其中有一个
thresholdTriggered
boolean属性和一个
getScrollState（）
函数用于此操作。非常感谢。我想达到同样的效果。@Rhys你不需要这样一个笨手笨脚的解决方案，只需在应用程序抽屉上添加位置静态，这样它就不会固定位置，并且会随着标题的折叠而向上移动