Angular Material Nicht Gesperrt Sidebar

Question

Ich habe eine Sidebar wie folgt aus:

Button 1 Taste 2 Dieses Starter-Applikation besteht aus einer Toolbar, SideNav (mit zwei Tasten) und Inhaltsbereich .

Dies ist der Inhaltsbereich!

Aktuelles Verhalten - wenn ich remote die md-is-locked-open Attribut und starten Sie die Seitenleiste anzuzeigen, wenn der Benutzer auf eine Schaltfläche klickt, dann wird die Seitenleiste Vollbild und nicht in den Inhaltsbereich.

So unterscheidet er sich in den folgenden Punkten bilden die gesperrte Version:

• Seine über die Symbolleiste
• Es Grautöne der Hauptinhalt
• seinen über den Inhaltsbereich

ot

Erforderliches Verhalten - Was muss ich ändern, um es im Inhaltsbereich zu haben? Es sieht genau so aus wie es ist wenn es verschlossen ist.

• Es sollte die Symbolleiste unter sein
• nicht Inhalt (bewegen sie sich überlappen sollten nur nach rechts =
• Sollte nicht andere Inhalte

Codepen Here

Answer 1

graut einfach ändern Sie die:

<div layout="row" flex> 

über den sidenav für:

<md-content layout="row" flex> 

und das entsprechende Schließschild. Und das ist es!

Die md-Symbolleiste muss mit einem md-Inhalt identisch sein, um das von Ihnen gesuchte Verhalten zu erhalten.

EDIT

Für Ihre weitere Anforderungen überprüfen Sie bitte diese Codepen ich gemacht habe. Es tut genau das, was Sie wollen (überschreiben Sie das Sitenav-Verhalten, um das Overlay auszublenden und den Inhalt nach rechts zu schieben): http://codepen.io/anon/pen/pjXYMa