Angular Material 陰影使用

依託於 Angular Material 庫，可以直接使用通用的符合 Material Design 風格的陰影。

使用

使用方式有兩種：

• 外聯樣式設定，即在css或scss中設定
• 通過class名稱設定，即 元素的class名稱

方式一：外聯樣式使用

1. 在scss或css檔案中匯入

@import '[email protected]/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 常用的陰影數值：