Ionic单选框使用全攻略

原创于 2025-12-14 16:11:51 发布 · 289 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

Ionic 单选框基础用法

Ionic框架提供了ion-radio组件实现单选框功能，需配合ion-radio-group使用。基本结构如下：

<ion-radio-group value="apple">
  <ion-list>
    <ion-item>
      <ion-label>Apple</ion-label>
      <ion-radio slot="end" value="apple"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Banana</ion-label>
      <ion-radio slot="end" value="banana"></ion-radio>
    </ion-item>
  </ion-list>
</ion-radio-group>

ion-radio-group的value属性用于设置默认选中项，当用户选择不同选项时会自动更新该值。

动态绑定与事件处理

通过Angular的双向绑定可以实时获取选中值：

// component.ts
selectedFruit: string = 'apple';

onRadioChange(event: CustomEvent) {
  console.log('Selected:', event.detail.value);
}

<!-- component.html -->
<ion-radio-group [(ngModel)]="selectedFruit" (ionChange)="onRadioChange($event)">
  <!-- radio options here -->
</ion-radio-group>

禁用单选框

通过disabled属性控制单选状态：

<ion-radio value="mango" [disabled]="true"></ion-radio>

自定义样式

利用CSS变量修改单选框外观：

ion-radio {
  --color: #ff5722;
  --color-checked: #8bc34a;
  --inner-border-radius: 50%;
  --border-width: 2px;
}

与表单集成

在响应式表单中使用单选框组：

// component.ts
form = new FormGroup({
  fruit: new FormControl('apple', Validators.required)
});

<!-- component.html -->
<form [formGroup]="form">
  <ion-radio-group formControlName="fruit">
    <!-- radio options -->
  </ion-radio-group>
</form>

动态生成选项

通过*ngFor动态渲染选项：

fruits = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' }
];

<ion-radio-group [(ngModel)]="selectedFruit">
  <ion-item *ngFor="let fruit of fruits">
    <ion-label>{{fruit.name}}</ion-label>
    <ion-radio slot="end" [value]="fruit.id"></ion-radio>
  </ion-item>
</ion-radio-group>

多组单选框管理

使用不同ion-radio-group实现多组互不干扰的单选：

<ion-radio-group name="group1">
  <!-- options group 1 -->
</ion-radio-group>

<ion-radio-group name="group2">
  <!-- options group 2 -->
</ion-radio-group>