有条件地改变垫子的颜色形成波纹 [英] Changing color of mat form ripple conditionally

问题描述

我正在开发一个有角度的应用程序.我正在按如下方式使用mat-form-field.

I am working on a angular app. I am using mat-form-field as follows.

<mat-form-field appearance="fill">
    <mat-label id="title">{{ title }}
    </mat-label>
    <input formControlName="title" matInput id="title" (click)='updateValue("title")' readonly>
</mat-form-field>

我用上面的代码得到一个矩形的表单域.当我将鼠标悬停在mat表单字段的底行上时，例如将鼠标放在特定表单字段的底部时，我想更改颜色.为此，我正在起诉以下CSS

I get a rectangle shaped form field with above code. When I hover over the bottom line of mat form field like when I take my mouse on bottom of a particular form field I want to change color. For it I am suing following CSS

.mat-form-field-ripple {
    background-color: #00798e;
}

默认情况下，它会更改mat表单字段的基础颜色.我在这里面临的问题是我想要在其他情况下使用其他颜色.例如，在我的组件中，我有一个变量，如果它的值是X，那么我要高于颜色，如果它的值是Y，那么我想应用其他波纹颜色.由于mat-form-field-ripple似乎是mat表单字段的build属性，因此我无法在运行时更改颜色.我在上面的代码中给出的任何颜色都适用于每种情况.但是我想要在不同条件下使用不同的颜色.我该怎么办?

It by defaults changes color of base of mat form field. The problem I am facing here is I want a different color in some other condition. For example, In my component I have a variable, If it's value is X then I want above color and if it's value is Y, then I want to apply a different ripple color. As mat-form-field-ripple seems to be in built property of mat form field, I am not able to change color at runtime. Whatever color I give in above code is applied in every condition. But I want different color in different conditions. How can I do that?

推荐答案

您可以将HTML元素的颜色绑定到变量.像这样:

You can bind the color of the HTML element to a variable. Something like:

<mat-form-field [style.background-color]="color">

并在.ts文件中定义变量颜色

And define the variable color in your .ts file

color: string = "red"

这样，每当您更改可变颜色的值时，元素的背景颜色也应发生变化.

That way, whenever you change the value of variable color, the background color of the element should change as well.

这篇关于有条件地改变垫子的颜色形成波纹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！