Angular Material 未锁定侧边栏答案

【问题标题】：Angular Material Not Locked sidebarAngular Material 未锁定侧边栏
【发布时间】：2016-03-01 11:37:15
【问题描述】：

我有一个这样的侧边栏：

按钮 1 按钮 2 此入门应用程序由工具栏、SideNav（带有两个按钮）和内容区域组成。

这是内容区！

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

所以它与锁定版本的区别在于以下几点：

必需的行为 - 我必须更改哪些内容才能将其放入内容区域？所以它看起来和它锁定时完全一样。

代码笔Here

【问题讨论】：

【解决方案1】：

只需更改：

<div layout="row" flex>

在sidenav上方：

<md-content layout="row" flex>

和相应的结束标记。就是这样！

md-toolbar 必须与 md-content 同级才能获得您正在寻找的行为。

编辑

对于您的进一步要求，请查看我制作的这个 Codepen。它完全符合您的要求（覆盖 sidenav 行为以隐藏覆盖并将内容推送到右侧）：http://codepen.io/anon/pen/pjXYMa

【讨论】：

tahts 只是一半:-( 它仍然使主要内容变灰并且覆盖在内容上我想让它像锁定一样以同样的方式扩展
你想让sidenav把内容推到右边吗？
是的，这样它看起来就像被锁定了，不应该让其他内容变灰
此功能不在 sidenav 小部件的规格中。我建议您创建自己的面板，将其与 md-content 同级放置，并通过切换类来为其宽度设置动画。覆盖小部件的行为很复杂，并且在未来的版本中很容易被破坏。
看看这个 Codepen。它完全符合您的要求（覆盖 sidenav 行为）：codepen.io/anon/pen/RWzeKy 我之前犯了一个小错误。