角材料设计：建立与顶部导航栏和左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

希望这有助于！