html – Angular Material Not Locked侧边栏

概述我有这样的侧边栏：                        按钮1                 按钮2                                                                此入门应用程序包含工具栏,SideNav(带有两个按钮)和内容区域.                     这是内容区！                    我有这样的侧边栏：

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

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

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

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

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

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

Codepen Here

解决方法 只需改变：

<div layout="row" flex>

在sIDenav之上：

<md-content layout="row" flex>

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

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

编辑

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

总结

以上是内存溢出为你收集整理的html – Angular Material Not Locked侧边栏全部内容，希望文章能够帮你解决html – Angular Material Not Locked侧边栏所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。