Angular 2 Material 2 顶 navbar\toolbar

Question

我的工具栏可以正常工作，但它在页面顶部周围留下了空隙，而不是平滑的。

我也希望它具有粘性，但尚未在该部分上工作，因为它看起来不像我的工具栏实现是 "header"。我做错了什么或者我使用了错误的组件？

<md-toolbar color="primary">
    <i class="material-icons app-toolbar-menu">menu</i>
    <span class="app-toolbar-filler"></span>
    <md-sidenav>
    </md-sidenav>
</md-toolbar>

Answer 1

只需将您的代码放在 md-sidenav-container 元素中并添加属性 fullscreen:

<md-sidenav-container fullscreen>
    <md-toolbar color="primary">
        <i class="material-icons app-toolbar-menu">menu</i>
        <span class="app-toolbar-filler"></span>
        <md-sidenav>
        </md-sidenav>
    </md-toolbar>
</md-sidenav-container>

Plunker Demo

更新： 你应该使用我上面的答案。它不需要 sidenav。

Answer 2

~~已接受~~ 其他答案似乎有点老套，因为您的工具栏并不是真正的 sidenav。这是一个更好的方法。

在styles.css中设置：

body {
    margin: 0;
}

但是，这也消除了 HTML 其余部分的边距。如果您不想要这个，请将 HTML 的其余部分包裹在 <div> 中并为其添加边距。

Angular 2 Material 2 顶 navbar\toolbar

Angular 2 Material 2 top navbar\toolbar

angular-material2

angular