属性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
网友评论