美文网首页
Material侧边栏导航组件md-sidenav

Material侧边栏导航组件md-sidenav

作者: IT飞牛 | 来源:发表于2018-05-10 23:26 被阅读0次

属性mode有3个可选值:
over(默认)、push、side
属性align有2个可选值:
start(默认)、end
一个页面中可以有多个md-sidenav,当有多个时,align必须设置。

<md-sidenav-container>
  <md-sidenav #sidenav1 mode="over" align="start">111</md-sidenav><!--当设置了左右两个侧边栏时,align必须写-->
  <md-sidenav #sidenav2 mode="over" align="end">222</md-sidenav>
  <div class="site">
    <header>
      <app-header></app-header>
    </header>
    <main>
      <Button variant="raised" className={classes.button} (click)="sidenav1.open()">打开左边侧边栏</Button>
      <Button variant="raised" className={classes.button} (click)="sidenav2.open()">打开右边侧边栏</Button>
    </main>
    <footer>
      <app-footer></app-footer>
    </footer>
  </div>
</md-sidenav-container>

最终效果:


aa.gif

相关文章

网友评论

      本文标题:Material侧边栏导航组件md-sidenav

      本文链接:https://www.haomeiwen.com/subject/itkxdftx.html