Question

此刻，它更改了滑块组件的背景颜色。如何为其他对象（例如图像的边框）分配动态颜色？

我想要动态色彩的地方

 <ion-thumbnail slot="start">
      <ion-img [src]="item.src"></ion-img>
    </ion-thumbnail>

该边框的颜色应根据离子范围内的值而改变

ion-thumbnail{
          border: 2px solid #ffffff;
        }

当前工作代码

<ion-range [(ngModel)]="value" color="white" [style.background]="getSliderBgColor(value)">

Answer 1

您好，您可以通过不同的方式动态更改边框的颜色，这很完美。

<ion-thumbnail slot="start" [style.border-color]="condition ? '#fff' : '#040404'">
      <ion-img [src]="item.src"></ion-img>
</ion-thumbnail>

对于以下各种颜色，您也可以选择使用不同的CSS类：

.white {
      border-color: #fff !important
 }
.blue {
      border-color: blue !important
 }
.black {
      border-color: #000000 !important
 }

然后您可以在代码中编写此代码

<ion-thumbnail slot="start" [ngClass]="{'white' : 
condition === true, 'blue': bluecondition === true, 'black': blackcondition === true}">
  <ion-img [src]="item.src"></ion-img>
</ion-thumbnail>

在这种情况下，为了不使事情复杂化，而是随意移动，应该是正确的。您也可以这样做

<ion-thumbnail slot="start" [ngClass]="condition? 'white' : 'blue'">
  <ion-img [src]="item.src"></ion-img>
</ion-thumbnail>

如何为图像的CSS边框分配动态颜色？

1 个答案: