'md-toolbar'の上に 'md-sidenav'を置く方法

Question

md-toolbarをmd-sidenavの上に置くとどうでしょうか？https://inbox.google.com/u/0/?pli=1 material2を使用していますか？

md-sidenavhttps://github.com/jelbourn/material2-app と角度のある素材2を使用した例ですが、私が望むように動作していません。

あなたは道md-toolbarがhttps://inbox.google.com/u/0/?pli=1

PS は、同様の質問md-sidenav toggle() is on top of the md-toolbarありますが、解決策はangular2 maerial2

Answer 1

と互換性がないにようmd-sidenav同じ方法の上にとどまる。この例を修正するだろうだろうか私が質問を理解していれば、これは私のために働く。ちょうどあなたがする必要があるのはmd-sidenav-container内のツールバーを移動である（ないsidenav容器内）、別の要素のツールバーを入れてもMD-sidenavコンテナ

<md-toolbar color="primary"> 
 
    <button md-icon-button (click)="nav.open()"> 
 
    <md-icon class="md-24">menu</md-icon> 
 
    </button> 
 
</md-toolbar> 
 

 
<md-sidenav-container> 
 

 
    <md-sidenav #nav> 
 
    <md-nav-list> 
 
     <md-list-item> 
 
     <a href="#"></a> 
 
     </md-list-item> 
 
     <md-list-item> 
 
     <a href="#"></a> 
 
     </md-list-item> 
 
    </md-nav-list> 
 
    </md-sidenav> 
 

 
    <div> 
 
    <div #root="$implicit"> 
 
     <router-outlet></router-outlet> 
 
    </div> 
 
    </div> 
 
</md-sidenav-container>

Answer 2

からフルスクリーンディレクティブを削除します。 toolbarとrouter-outletがflex div内にあり、columnの方向にあることを確認してください。 divのenclosingのrouter-outletに高さ、パディングなどを調整して垂直オーバーフローを設定するには、いくつかのCSSが必要です。これにより、コンテンツをスクロールするときに常にtoolbarが表示されるようになります。

以下は私にとってうまくいきます。 （注：私はフレックスレイアウトが容易になり、角/フレックスレイアウト、@を使用しているあなたは、通常のフレックスCSSのスタイリングにそれを変更することができます希望する場合。）

<div> 
    <md-sidenav-container fxLayout="row" class="app-inner"> 

     <md-sidenav #nav class="app-sidebar-panel" mode="over" [opened]="false"> 

      <md-nav-list> 
       <md-list-item> 
        <a href="#">Item-1</a> 
       </md-list-item> 
       <md-list-item> 
        <a href="#">Item-2</a> 
       </md-list-item> 
       <md-list-item> 
        <a href="#">Item-3</a> 
       </md-list-item> 
      </md-nav-list> 

     </md-sidenav> 

     <div fxLayout="column" fxLayoutAlign="start stretch"> 

      <md-toolbar class="app-toolbar" color="primary"> 
       <button md-icon-button (click)="nav.open()"> 
        <md-icon>menu</md-icon> 
       </button> 
      </md-toolbar> 

      <div class="app-route-content"> 
       <router-outlet></router-outlet> 
      </div> 

     </div> 

    </md-sidenav-container> 
</div> 

スタイル（SASS）が必要これは、

$app-toolbar-height: 48px !default; 
$app-route-content-padding: 0.5rem !default; 
$app-sidebar-width: 15.65rem !default; 

// Important: This is required to override the 
// default padding of md-sidenav-content. 

:host /deep/ { 
    .md-sidenav-content { 
     padding: 0px; 
    } 
} 

.app-inner { 
    position: relative; 
    width: 100%; 
    max-width: 100%; 
    height: 100vh; 
    min-height: 100vh; 
} 

md-sidenav.app-sidebar-panel { 
    overflow-x: hidden; 
    width: $app-sidebar-width; 
    box-shadow: 3px 0px 6px rgba(0, 0, 0, 0.3) !important; 
} 

md-toolbar { 
    min-height: $app-toolbar-height !important; 
    md-toolbar-row { 
     min-height: $app-toolbar-height !important; 
     height: $app-toolbar-height !important; 
    } 
    &.main-header { 
     position: relative; 
     box-shadow: 0 1px 8px rgba(0, 0, 0, .3); 
     z-index: 1; 
    } 
} 

.app-toolbar { 
    position: relative; 
    box-shadow: 0 1px 8px rgba(0, 0, 0, .3); 
} 

.app-route-content { 
    overflow-y: scroll; 
    padding: #{$app-route-content-padding} !important; 
    height: calc(100vh - #{$app-toolbar-height} - #{$app-route-content-padding} * 2); 
} 

希望です。