角材料設計：建立與頂部導航欄和左sidenav

Question

嗨，我想建立一個簡單的模板，採用了棱角分明材料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黑客）？

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

希望這有助於！