离子如何使用按钮而不是通常的离子收音机并使它们水平对齐答案

【问题标题】：Ionic how to use buttons instead of usual ion radio and make them horizontally aligned离子如何使用按钮而不是通常的离子收音机并使它们水平对齐
【发布时间】：2023-03-23 20:15:01
【问题描述】：

<ion-list radio-group [(ngModel)]="gender">
  <ion-item>
    <ion-label>Male</ion-label>
    <ion-radio value="male" checked></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Female</ion-label>
    <ion-radio value="female"></ion-radio>
  </ion-item>
</ion-list>

我希望它们看起来像两个按钮，用户只能选择一个按钮，并且按钮的选择颜色会改变。

【问题讨论】：

标签： html angularjs ionic-framework radio-button

【解决方案1】：

你可以试试这样的按钮

<div>
    <button ion-button [color]="gender == 'Male' ? 'secondary' : 'primary'" (click)="gender = 'Male'">Male</button>
    <button ion-button [color]="gender == 'Female' ? 'secondary' : 'primary'" (click)="gender = 'Female'">Female</button>
</div>

演示link

【讨论】：