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

但是右侧的图标消失了。

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

去掉样式显示右侧图标，但工具栏未修复:

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

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