使用應用程序抽屜佈局與應用程序標題佈局

Question

我正在創建一個新的Web應用程序在聚合物1.0需要以下佈局。

• 一個頭面板覆蓋整個頁面加載時並冷凝成小欄
• 迴應式抽屜面板是在移動的情況下，滑動式，並在大屏幕上獲得持久的高度。

聚合物已經有其自己的Web組件用於此目的，即 app-header-panel和app-drawer-panel

我想直線前進的解決方案是通過包含標題面板內的整個抽屜面板。他們完美的工作，直到我把它們放在一個頁面中。將它們一起使用時，我正面臨一些佈局問題。

永久性抽屜移動到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">