必须依赖 :

  • angualr2+
  • angular/material2 +
  • angular/cdk
  • angular/core
  • angualr/animations

开始使用 :

自带主题位置在 /node_modules/@angular/material/prebuilt-themes/

1 .在app.module.ts中 :

导入动画库

import {BrowserAnimationsModule} from "@angular/platform-browser/animations";

声明需要的组件

import {MatSidenavModule} from "@angular/material";

2 .在/style.scss导入全局样式

1
2
3
4
5
6
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
html, body, app-root ,mat-sidenav-container{
width: 100%;
height: 100%;
margin: 0;
}

也可以也可以参照官网文档自定义主题 ,不导入会有部分样式不可用

其他样式是为了清除浏览器默认样式 ,可以没有但建议写

在AppModel的装饰器中导入需要的组件 : (部分组件需要导出)

@NgModule({
    imports : [
            .....
            MatSidenavModule,
    ],
})

4. 在模板中使用 :

1
2
3
4
5
6
7
<mat-sidenav-container>
<!-- #sidenav 代表当前组件 , mode 声明这是一个sidenav组件 -->
<mat-sidenav #sidenav mode="side" align="start">
这里是侧边栏
</mat-sidenav>
<button (click)="sidenav.open()">打开侧边栏</button>
</mat-sidenav-container>

mode

sidenav的呈现形式 , 共有3种:

  1. side 把整个页面向align侧推动 ,不会盖住页面 ,但是不会有2一样的遮罩层 如图
  2. over 是默认样式 ,如图p1-1 ,侧边栏会盖住页面 ,不写mode时就是如此 ,如图
  3. push 综合了1 和 2 ,有遮罩的同时又不会覆盖原有的内容 如图

align

指sidenav的呈现位置 , 共2种
  1. start默认 ,左侧 ,不写就是如此 如图
  2. end右侧 ,从页面右边弹出 如图

一些特殊用法 :

一个页面同时出现来两个侧边栏 , 图上1 AND 2的效果 ,另外两个需要脑补 :

1
2
3
4
5
6
7
<mat-sidenav-container>
<mat-sidenav #sidenav mode="push" align="start">我在左侧</mat-sidenav>
<mat-sidenav #sidenav2 mode="push" align="end">我在右侧</mat-sidenav>
<button (click)="sidenav.open()">ON 1</button>
<button (click)="sidenav2.open()">ON 2</button>
<button (click)="sidenav2.open() ;sidenav.open()">1 AND 2</button>
</mat-sidenav-container>