美文网首页
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