Angular 2 sidenav with Angular 2素材

Question

我希望设计一个带有sidenav的固定工具栏。我没有找到适当的指导，尤其是对于Angular 2 Material。 我想达到的是这个Sidenav 任何指导，参考或任何帮助将不胜感激。

Answer 1

以下是您可以开始使用的template。

HTML：

<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>