IonicCheckbox全面使用指南

Ionic Checkbox 基础用法

Ionic Checkbox 是 Ionic 框架提供的复选框组件，用于表单中的多选操作。基本用法如下：

<ion-item>
<ion-checkbox slot="start"></ion-checkbox>
<ion-label>选项 1</ion-label>
</ion-item>

绑定数据与事件处理

通过 [(ngModel)] 实现双向数据绑定，并处理 ionChange 事件：

// component.ts
export class MyComponent {
isChecked: boolean = false;

onCheckboxChange(event: any) {
console.log('Checkbox 状态变化:', event.detail.checked);
}
}

<!– template.html –>
<ion-item>
<ion-checkbox
[(ngModel)]="isChecked"
(ionChange)="onCheckboxChange($event)"
></ion-checkbox>
<ion-label>同意条款</ion-label>
</ion-item>

自定义样式与属性

通过 CSS 自定义样式，并设置禁用状态：

/* 自定义样式 */
ion-checkbox {
–size: 24px;
–background-checked: #4caf50;
}

ion-checkbox::part(container) {
border-radius: 6px;
border: 2px solid #ddd;
}

<!– 禁用状态 –>
<ion-checkbox disabled="true"></ion-checkbox>

动态生成复选框列表

结合 *ngFor 动态生成复选框组：

// component.ts
options = [
{ id: 1, name: 'Angular', selected: false },
{ id: 2, name: 'React', selected: true },
{ id: 3, name: 'Vue', selected: false }
];

<!– template.html –>
<ion-list>
<ion-item *ngFor="let option of options">
<ion-checkbox
[(ngModel)]="option.selected"
slot="start"
></ion-checkbox>
<ion-label>{{ option.name }}</ion-label>
</ion-item>
</ion-list>

表单集成

与 Ionic 表单结合使用：

// component.ts
import { FormGroup, FormBuilder } from '@angular/forms';

export class MyFormComponent {
form: FormGroup;

constructor(private fb: FormBuilder) {
this.form = this.fb.group({
acceptTerms: [false],
notifications: [true]
});
}
}

<!– template.html –>
<form [formGroup]="form">
<ion-item>
<ion-checkbox formControlName="acceptTerms"></ion-checkbox>
<ion-label>接受条款</ion-label>
</ion-item>

<ion-item>
<ion-checkbox formControlName="notifications"></ion-checkbox>
<ion-label>接收通知</ion-label>
</ion-item>
</form>

高级用法 – 自定义图标

替换默认复选框图标：

<ion-checkbox>
<div slot="end" class="custom-icon">
<ion-icon name="star"></ion-icon>
</div>
</ion-checkbox>

.custom-icon {
margin-left: 10px;
color: #ffc409;
}

性能优化技巧

对于大型列表使用虚拟滚动：

<ion-content [fullscreen]="true">
<ion-list [virtualScroll]="items">
<ion-item *virtualItem="let item">
<ion-checkbox [(ngModel)]="item.selected"></ion-checkbox>
<ion-label>{{ item.name }}</ion-label>
</ion-item>
</ion-list>
</ion-content>

以上代码示例覆盖了 Ionic Checkbox 的主要使用场景，包括基础用法、数据绑定、表单集成和性能优化等方面。实际开发中可根据需求组合这些技术实现复杂功能。