角度材料sidenav和固定工具栏

Question

我从角度材料文档复制了这个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">

但是右边的图标已经消失了。

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

删除样式会显示右侧图标，但工具栏未固定：

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

Answer 1

您必须在md-sidenav容器内使用md-content。另外，请尝试使用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

Answer 2

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

<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