Angular Material Design：使用顶部导航栏和左侧导航栏构建模板

Question

您好，我想使用 Angular Material 2 构建一个简单的模板：

这是代码

<md-toolbar>
    <button><md-icon>menu</md-icon></button>
    <h1>Angular</h1>
</md-toolbar>

<md-sidenav-container>

  <md-sidenav>
  <nav>
    <ul>
      <li><a routerLink="/Foo" routerLinkActive="active">Foo</a></li>
      <li><a routerLink="/Bar" routerLinkActive="active">Bar</a></li>
      <li><a routerLink="/Baz" routerLinkActive="active">Bar</a></li>
    </ul>
  </nav>
  </md-sidenav>

  <router-outlet></router-outlet>

  <footer></footer>

</md-sidenav-container>

我有一点问题：

1. sidenav 覆盖路由器插座
2. 路由器插座不是 100% 高度

是否可以仅使用材料组件（无需 css hack）来实现此模板？

Answer 1

这是您的模板的详细示例。我只是添加了颜色以轻松区分它们。

<md-toolbar color="accent">
    <button (click)="sidenav.toggle()">
      <md-icon>menu</md-icon>
    </button>
    <h1>Angular</h1>
</md-toolbar>

<md-sidenav-container style="height: 91vh;background: yellow">
  
  <md-sidenav #sidenav mode="side" style="background: orange">
    Sidenav!
  </md-sidenav>

  <md-tab-group>
    <md-tab label="Tab 1">Content 1</md-tab>
    <md-tab label="Tab 2">Content 2</md-tab>
 </md-tab-group>

</md-sidenav-container>

<footer style="background: skyblue">This is footer</footer>

demo

希望这会有所帮助！