时间戳

首页 > 解决方案 > 离子颜色文本取决于条件

css - 离子颜色文本取决于条件

问题描述

我有一个非常临时的解决方案，可以在用户点击后在一个小滑块中突出显示文本。

<ion-slide *ngFor="let loopValue of values">
<div *ngIf="viewValue == loopValue">
    <b>
        {{loopValue}}
    </b>
</div>
<div *ngIf="viewValue != loopValue">
    {{loopValue}}
</div>
</ion-slide>

在这里，我通过将幻灯片内容包装到一个粗体括号中来突出显示选择。但是，我更希望字体是离子定义的主要或次要颜色以突出显示用户点击。如何？

标签： cssangularionic-frameworkionic3

解决方案

Ionic 4
您可以使用ion-text标签的颜色属性。然后你的代码可能看起来像这样：

<ion-slide *ngFor="let loopValue of values">
  <ion-text [color]="viewValue == loopValue ? 'primary' : 'light'">
   {{loopValue}}
  </ion-text>
</ion-slide>



Ionic 3
因为没有ion-text你应该使用的标签ion-item。
这是一个示例（也在stackblitz上创建了一个示例）：

<ion-slides>
  <ion-slide *ngFor="let loopValue of values">
    <ion-item [color]="viewValue == loopValue ? 'primary' : 'light'">
      {{loopValue}}
    </ion-item>
  </ion-slide>
</ion-slides>

这样，您不必使用*ngIf. 相反， 的颜色ion-text取决于color-property 中的三元运算符。

推荐阅读