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

Question

<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>

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

标签： htmlangularjsionic-frameworkradio-button

Answer 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>

演示链接