角度材质设计：使用顶部导航栏和左侧边框构建模板

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

希望这有帮助！