角度材料未锁定侧边栏

Question

我有这样的侧边栏:

按钮1按钮2此入门应用程序包含工具栏,SideNav(带有两个按钮)和内容区域.

这是内容区!

当前行为 - 当我远程处理md-is-locked-open属性并在用户单击按钮时开始显示侧栏时,侧栏是全屏而不是内容区域内.

因此,锁定版本的不同之处在于以下几点:

• 它在工具栏上方
• 它是灰色的主要内容
• 它在内容领域

必需的行为 - 我必须更改内容以在内容区域内进行更改？因此它看起来与锁定时完全相同.

• 它应该是工具栏的一部分
• 不应重叠主要内容(只需将其移至右侧=
• 不应该灰显其他内容

Codepen 在这里

Answer 1

只需改变:

<div layout="row" flex>

在sidenav之上:

<md-content layout="row" flex>

和相应的结束标记.就是这样!

md工具栏必须是md-content的兄弟,以获得您正在寻找的行为.

编辑

有关您的进一步要求,请查看我已制作的Codepen.它完全符合您的要求(覆盖sidenav行为以隐藏叠加层并将内容推向右侧):http://codepen.io/anon/pen/pjXYMa