2017-01-21 9 views
0

私はmaterial2 sidenavコンポーネントを使用しようとしています。私はそれをコンテンツとは別にしたい。それは私のアプリケーションのレイアウトでいくつかの望ましくないものを作成するので、サイドハイビジョンのサイドバーは、サイドとサイドにスライドします。Angular2 Material2 - sidenavとは関係なく

私は本当に近くに見えるhttps://inbox.google.com/u/0/?pli=1 sidenavに近い。 私が現在持っていることは次のとおりです。

enter image description here

enter image description here

+0

、あなたが話している不要な何の事? – micronyks

+0

いくつか。まず、私は自分のコンテンツを欲したり、調子を崩したり、残りの部分を押したりしません。基本的に私は、 "サイド"モードと "オーバー"のようなものが欲しいです。また、トップナビのスペースをシデナブが外に出ないようにしておく必要があります。 –

+0

私はsidenav-layoutからトップナビゲーションを外し、それをカバーしないようにレイアウトからフルスクリーンの指示文を削除しようとしました。これは1つの問題を解決しましたが、もう一方の問題を作成しました非フルスクリーンのサイドローブレイアウトは解決策ではありません。私が欲しいのは、トップナビを覆わずにサイドナヴァを完全な高さにすることです。私はスクリーンショットを添付しました。 –

答えて

2

あなたはサイドバーとメインコンテンツを分離したい場合は、以下のように達成するために、ブートストラップの列クラスを使用して、

<md-sidenav-container class="container-fluid"> 
    <div class="col-md-1"> 
    <button md-button (click)="sidenav.open()"> 
     <i class="fa fa-list"></i> 
    </button> 
    </div> 
    <div class="col-md-11"> 
    Main content goes here 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
    </div> 
    <md-sidenav #sidenav class="example-sidenav"> 
    Manu bar 
    </md-sidenav> 

</md-sidenav-container> 

注意:コンテンツの高さを上げるために改行タグが追加されました。

LIVE DEMO

関連する問題