Ionic 单选框操作

在 Ionic 中，单选框是一种常见的用户输入控件，用于让用户从一组选项中选择一个选项。在本章节中，我们将学习如何在 Ionic 应用中使用和操作单选框。

创建单选框

要创建一个单选框，我们可以使用 Ionic 提供的 <ion-radio> 元素。首先，我们需要在模板中添加一个单选框组件：

// www.javascriptcn.com code example
<ion-list>
  <ion-radio-group [(ngModel)]="selectedFruit">
    <ion-item>
      <ion-label>Apple</ion-label>
      <ion-radio value="apple"></ion-radio>
    </ion-item>
    
    <ion-item>
      <ion-label>Banana</ion-label>
      <ion-radio value="banana"></ion-radio>
    </ion-item>
    
    <ion-item>
      <ion-label>Orange</ion-label>
      <ion-radio value="orange"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

在上面的代码中，我们创建了一个包含三个选项的单选框组件。当用户选择一个选项时，selectedFruit 变量会被更新为所选选项的值（"apple"、"banana" 或 "orange"）。

获取选中的值

要获取用户选择的单选框的值，我们可以在组件中使用 selectedFruit 变量。例如，我们可以在点击按钮时打印出用户选择的水果：

// www.javascriptcn.com code example
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  selectedFruit: string;

  constructor() {}

  logSelectedFruit() {
    console.log(this.selectedFruit);
  }
}

在上面的代码中，我们定义了一个 selectedFruit 变量来存储用户选择的水果，然后在 logSelectedFruit 方法中打印出所选水果的值。

自定义样式

我们还可以通过添加自定义样式来美化单选框。例如，我们可以使用 CSS 来改变单选框的颜色、大小或布局：

// www.javascriptcn.com code example
/* Change radio button color */
ion-radio {
  --background-checked: #FF6347;
}

/* Change radio button size */
ion-radio {
  --inner: 20px;
  --inner-background-checked: #FF6347;
}

在上面的代码中，我们改变了单选框选中时的背景颜色和大小。

通过以上内容，我们学习了如何在 Ionic 应用中创建、操作和自定义单选框。在实际开发中，可以根据需求进一步扩展和优化单选框的功能和样式。