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>

Angular 2 sidenav与Angular 2材料

1 个答案: