时间戳

首页 > 解决方案 > 如何在ionic 5中将单选组选中圆圈更改为刻度线

angular - 如何在ionic 5中将单选组选中圆圈更改为刻度线

问题描述

我在 ionic 5 中工作，我想将选中的单选圆圈更改为刻度线以匹配 ux 设计，请帮助我。这是代码。

<ion-list>
  <ion-radio-group>
    <ion-list-header>
      <ion-label>
        Auto Manufacturers
      </ion-label>
    </ion-list-header>

    <ion-item>
      <ion-label>Cord</ion-label>
      <ion-radio value="cord"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Duesenberg</ion-label>
      <ion-radio value="duesenberg"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Hudson</ion-label>
      <ion-radio value="hudson"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Packard</ion-label>
      <ion-radio value="packard"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Studebaker</ion-label>
      <ion-radio value="studebaker"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

标签： angularionic5

解决方案

可以将 for的mode属性ion-radio强制设置为使用检查而不是正常的“收音机”样式的 iOS。

https://ionicframework.com/docs/api/radio#properties

模式 描述
模式确定要使用的平台样式。

属性模式类型“ios” | “MD”

<ion-item>
  <ion-label>Cord</ion-label>
  <ion-radio mode="ios" value="cord"></ion-radio>
</ion-item>

我不认为这是最好的设计选择，因为复选框和单选按钮具有不同的 UI 含义和交互，但我猜 iOS 就是这样做的。

这是一个示例 stackblitz https://stackblitz.com/edit/ionic-angular-v5-y8wjvk

推荐阅读