Angular 材质 sidenav 和固定工具栏答案

【问题标题】：Angular material sidenav and fixed toolbarAngular 材质 sidenav 和固定工具栏
【发布时间】：2016-06-29 12:09:54
【问题描述】：

我从 angular material 文档中复制了这个 sidenav 演示。 https://material.angularjs.org/latest/demo/sidenav

并添加了来自https://material.angularjs.org/latest/demo/toolbar的第一个工具栏演示

我想要的是要修复的工具栏。

Codepen 演示：http://codepen.io/gvorster/pen/BzWvGe

添加此样式时，工具栏是固定的。

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

但是右边的图标不见了。

调整屏幕大小直到sidenav被隐藏将显示右侧图标。

移除样式显示右侧图标但工具栏不固定：

有没有办法获得一个粘性工具栏并显示右侧图标。

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

您必须在 md-content 容器内使用 md-sidenav。另外尝试使用md-content 而不是div 标签。在您的示例中，您为 layout-align 属性提供了错误的值。请检查Docs 中的相应值。

这是满足您要求的基本结构。

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

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

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

这是工作笔。 http://codepen.io/next1/pen/xOqMjy

【讨论】：

有没有办法用 angular 2 的材料来做到这一点？ md-content 似乎不存在，我遇到的问题与@Guus 完全相同。

【解决方案2】：

您需要为所有容器添加布局，并将工具栏移出应该滚动的 md-content。

<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>

这是一个工作演示：http://codepen.io/anon/pen/EyWJKK?editors=1010

【讨论】：