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>

演示

希望這可以幫助！