app-headerの下にアプリの引き出しを配置する

Question

スターターキット2のテンプレートを使用すると、アプリの引き出しをapp-header以下にすることはできますか？今では、アプリケーションドロワはビューポートの先頭から始まり、app-headerの横に列になっています。

私のアプリは、GoogleヘッダーとGoogleのクラウドコンソールのようになります。アプリのヘッダーは、ビューポートの全幅にわたっていて、アプリの引き出しは下から始まります。

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

NOTE

（drawer-toggleプロパティが動作しません）。