时间戳

首页 > 解决方案 > 如何在 Ionic 6 上检查离子无线电时更改离子标签颜色？

ionic-framework - 如何在 Ionic 6 上检查离子无线电时更改离子标签颜色？

问题描述

我有以下一段 Ionic 代码，

<ion-radio-group>
  <ion-item class="ship-method">
    <ion-label>Flat Rate £0.00</ion-label>
    <ion-radio slot="end" value="flat-rate"></ion-radio>
  </ion-item>
  <ion-item class="ship-method">
    <ion-label>Free Shipping</ion-label>
    <ion-radio slot="end" value="free-shipping"></ion-radio>
  </ion-item>
</ion-radio-group>

并遵循部分 SCSS 代码，

.ship-method {
    margin: 25px;

    ion-label { font-size: 16px; }

    ion-radio {
        --color-checked: #e22078;
    }
}

我想要的是<ion-label>在#e22078检查相应的<ion-radio>. 我怎样才能做到这一点？

标签： ionic-framework

解决方案

首先，您需要将所选单选按钮的值绑定到一个变量中。.ts所以，在你的文件中声明一个变量：

selectedShippingMethod:string=''; //Or change it to 'flat-rate' for default value

接下来在您的模板文件中添加一个2-way 绑定，以便您可以保存所选单选按钮的值。

<ion-radio-group [(ngModel)]="selectedShippingMethod">
  <ion-item class="ship-method">
    <ion-label [class.selected]="selectedShippingMethod=='flat-rate'">Flat Rate £0.00</ion-label>
    <ion-radio slot="end" value="flat-rate"></ion-radio>
  </ion-item>
  <ion-item class="ship-method">
    <ion-label [class.selected]="selectedShippingMethod=='free-shipping'">Free Shipping</ion-label>
    <ion-radio slot="end" value="free-shipping"></ion-radio>
  </ion-item>
</ion-radio-group>

在 .SCSS 文件中添加一个名为selected的类：

.selected{

   color:#e22078;
}

在这里，当 的值与该单选按钮的值匹配时，您将分配离子标签类“已选择”selectedShippingMethod

<ion-label [class.selected]="selectedShippingMethod=='free-shipping'">

推荐阅读