Angular Material sideNav und feste Werkzeugleiste

Question

Ich kopierte diese Sideav-Demo aus dem eckigen Material Dokumente. https://material.angularjs.org/latest/demo/sidenav

Und hinzugefügt, um die erste Symbolleiste Demo, um es von https://material.angularjs.org/latest/demo/toolbar

Was ich möchte, dass die Symbolleiste festgelegt werden soll.

Codepen Demo: http://codepen.io/gvorster/pen/BzWvGe

Beim Hinzufügen dieses Modell auch die Symbolleiste festgelegt ist.

<md-toolbar class="md-hue-2" style="position:fixed !important"> 

Aber die Symbole auf der rechten Seite sind weg.

Ändern der Größe des Bildschirms, bis die sidenav versteckt ist, wird die rechte Seite Symbole zeigen.

den Stil Entfernen zeigt die rechte Seite Symbole aber die Symbolleiste ist nicht festgelegt:

Gibt es eine Möglichkeit, eine klebrige Symbolleiste zu erhalten und haben die rigth Seite Symbole angezeigt.

Answer 1

Sie müssen md-sidenav innerhalb des md-content Containers verwenden. Plus versuchen Sie md-content anstelle von div Tag zu verwenden. In Ihrem Beispiel haben Sie dem Attribut layout-align falsche Werte gegeben. Bitte überprüfen Sie die entsprechenden Werte in der Docs.

Hier ist die Grundstruktur für Ihre Anforderung.

<md-content flex> 
    <md-toolbar> 
    </md-toolbar> 

    <md-content layout="column" layout-fill> 
     <!-- content --> 

     <md-sidenav> 
     </md-sidenav> 
    </md-content> 
</md-content> 

hier ist der funktionierende Stift. http://codepen.io/next1/pen/xOqMjy

Answer 2

Sie müssen Layouts für alle Container hinzufügen und die Symbolleiste aus dem MD-Inhalt verschieben, der gescrollt werden soll.

<div layout="row" flex> 
<md-sidenav></md-sidenav> 
<div layout="column" flex> 
    <md-toolbar></md-toolbar> 
    <md-content></md-content> 
</div> 
<md-sidenav></md-sidenav> 
</div> 

Hier ist eine Arbeits Demo: http://codepen.io/anon/pen/EyWJKK?editors=1010