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>