我有一个默认类的图标,类名是card-icon,现在我如何根据条件更改类或禁用类?
因为图标的默认颜色现在是灰色的,当条件满足或条件为真时,我想把它改为黑色。
条件如下,当条件为真时禁用class="card-icon"或者如果不可能禁用,则在新类(例如[class])出现时替换。终极].
你们知道怎么实现这个吗?谢谢你。
#图标默认类
<mat-icon class="card-icon">group</mat-icon>
#条件<mat-icon class="active-icon" [class.newclass]="currentTabElement === 'group'">group</mat-icon>
你可以在angular中使用ng class
属性来切换CSS类作为一个例子,如果我想创建一个切换按钮,需要在深色背景和浅色背景之间切换,我可以做以下更改:
HTML文件
<div [ngClass]="{'black-background':blacked, 'white-background':!blacked}">
CSS/SCSS file
.black-background {
background-color: #000;
}
.white-background {
background-color: #FFF;
}
打印稿文件在typescript文件中,你需要有属性blacked
值,我们在HTML标签中传递的值需要是true
或false
blacked = true;
现在,blacked
的值为真,所以black-background
的值为true
,所以现在我们可以看到黑色的背景。如果属性为blacked=false;
,则white-background
的值为true
,因为我们传递了white-background:!blacked
。这样我们就可以在CSS类之间切换了
使用ngClass.
<mat-icon [ngClass]="{'card-icon': true, 'active-icon': currentTabElement === 'group'}">group</mat-icon>
上面的代码将把card-icon
类添加到所有图标,active-icon
类只有当条件currentTabElement === 'group'
求值为true时