Angular material 侧导航和固定工具栏

Question

我从 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 将显示右侧图标。

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

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

Answer 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

Answer 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

Angular material 侧导航和固定工具栏

Angular material sidenav and fixed toolbar

angularjs

angular-material