Angular Material 阴影使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wf19930209/article/details/84310913

Angular Material 阴影使用

依托于 Angular Material 库，可以直接使用通用的符合 Material Design 风格的阴影。

使用

使用方式有两种：

• 外联样式设定，即在css或scss中设定
• 通过class名称设定，即 元素的class名称

方式一：外联样式使用

1. 在scss或css文件中导入

@import '~@angular/material/theming';

2. 在class名称或者id内设定

.my-custom-button  { 
     @include mat-elevation(2);
}

其中mat-elevation(2)这个函数需要传递一个数值类型的参数，这个参数值越大阴影越大。

编译后的阴影样式为：

.my-custom-button {
  box-shadow: 
    0px 3px 1px -2px rgba(0, 0, 0, 0.2), 
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

方式二：通过元素class设定

不需要导入直接使用,通过使用 mat-elevation-zX这个通用的class来设定，其中X是数字，代表阴影的高度，也可理解为阴影的程度，值越大阴影越大。

<div class="mat-elevation-z24">
	<p>你好</p>
</div>

备注

Angular Material 常用的阴影数值：

Elevation(dp)	Component
24	Dialog Picker
16	Nav Drawer Right drawer Modal bottom Sheet
12	Floating action button(FAB - pressed)
9	Sub menu ( +1 dp for each sub menu )
8	Bottom navigation bar Menu Card Raised button ( pressed state )
6	Floating action button ( FAB - resting elevation ) Snackbar
4	App Bar
3	Refresh indicator Quick entry / Search bar ( scrolled state )
2	Caed ( resting elevation ) * Raised button ( resting elevation ) Quick entry / Search bar ( scrolled state )
1	Switch