Angular Material 陰影使用

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

使用

使用方式有兩種：

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

方式一：外聯樣式使用

在scss或css文件中導入

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

在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); }

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Angular Material 阴影使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。