app-header-layoutでのapp-drawer-layoutの使用

Question

私は次のレイアウトが必要なPolymer 1.0で新しいwebappを作成しています。

• ロード中にページ全体をカバーし、小さなツールバー
• 携帯電話の場合にスワイプであり、大画面上に永続取得応答引出しパネルの高さに凝縮ヘッダパネル。

ポリマーは、既に私はストレートフォワード溶液ヘッダーパネル内全体引出しパネルを含有することで推測、即ちこの目的のため app-header-panelとapp-drawer-panel

を独自のWebコンポーネントを有していました。彼らは私が両方のページを一つのページにまとめるまで完璧に働いていました。私はそれらを一緒に使用するときいくつかのレイアウトの問題に直面している。

ヘッダパネルのコンテンツ領域に貼り付けるのではなく、app-header-panelの後ろにある永続的な引き出し。 （注：：app-header-layoutはapp-drawer-panelよりもz-indexが高い）。

この問題を解決するにはどうすればよいですか？

Answer 1

最初に、z-indexやpostionなどのapp-layoutのコンポーネントを変更しようとするあなたのCSSをすべて消去するか、コンポーネントを使いこなすことになります。ここで

は私のサンプルです：

<app-drawer-layout fullbleed 
        force-narrow> 
    <!-- Drawer content --> 
    <app-drawer id="appDrawer" 
       swipe-open> 
     <app-toolbar>Menu</app-toolbar> 

     <!-- Some content --> 
    </app-drawer> 

    <!-- Main content --> 
    <app-header-layout has-scrolling-region> 

     <app-header fixed 
        effects="waterfall"> 
      <app-toolbar> 
       <paper-icon-button icon="menu" 
            drawer-toggle></paper-icon-button> 
       <div title>My App</div> 
      </app-toolbar> 
     </app-header> 

     <!-- Some content --> 

    </app-header-layout> 
</app-drawer-layout> 

は、すべての依存関係をインポートすることを忘れないでください：

<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html"> 
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html"> 
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html"> 
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html"> 
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html"> 
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">