html - 如何为图像的 css 边框分配动态颜色？

Question

目前它改变了 slider 组件的背景颜色。如何将动态颜色分配给其他对象，例如图像的边框？

我想要动态颜色的地方

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

该边框的颜色应根据 ion-range 中的值而变化

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>