[英]Using shadow on mat-card in angular
我正在开发一个带有 angular 前端的项目,我正在尝试为我的一个组件添加阴影,并且已经阅读了class="mat-elevation-z8"
应该可以解决问题。 但是,它什么也没做。
我的 html:
<mat-card class="mat-elevation-z8" style="height: 400px; width: 400px;">
<mat-card-header>
<mat-card-title *ngIf="message">{{(message.title | truncateword: 25) | slice:0:30}}</mat-card-title>
<mat-card-subtitle *ngIf="message">{{message.publishedAt | date}}</mat-card-subtitle>
</mat-card-header>
<img *ngIf="image" [src]="image" alt="Here might be a preview image" mat-card-image>
<mat-card-content>
<p *ngIf="message">
{{(message.summary | truncateword:70 | slice:0:73)}}
</p>
</mat-card-content>
</mat-card>
另外,我在我的 styles.css 中导入~@angular/material/theming
theming,所以这也不应该是问题。 这是我的 angular.json 中的 styles:
"styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.scss"
],
有任何想法吗?
你应该尝试:
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
Angular 材质垫卡阴影可以使用 [class.mat-elevation-z8] 属性进行切换
<mat-card [class.mat-elevation-z8]="false">
Example
</mat-card>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.