Ionic复选框 _Ionic复选框

本文概述

样式复选框
列表中的复选框

复选框是一种包含布尔值的输入组件。它类似于HTML复选框输入。与其他Ionic组件一样, Ionic复选框在每个平台上的样式也不同。你可以将选中的属性与< ion-checkbox> 元素一起使用来设置默认值, 而禁用的属性可以使用户无法更改该值。
例
以下示例显示了Ionic应用程序中使用的不同类型的复选框。

< ion-header> < ion-toolbar> < ion-title> CheckBox< /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light"> < !-- Default Checkbox --> < div> < ion-checkbox> < /ion-checkbox> < ion-label> Default< /ion-label> < /div> < !-- Disabled Checkbox --> < div> < ion-checkbox disabled="true"> < /ion-checkbox> < ion-label> Disabled< /ion-label> < /div> < !-- Checked Checkbox --> < div> < ion-checkbox checked="true"> < /ion-checkbox> < ion-label> Checked< /ion-label> < /div> < /ion-content>

输出量
当你在终端中执行该应用程序时, 它将给出以下输出。

文章图片
样式复选框如果要设置复选框的样式, 请使用Ionic color属性和复选框前缀。下面的示例说明将Ionic color属性与复选框组件一起使用。
例

< ion-header> < ion-toolbar> < ion-title> CheckBox< /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light"> < !-- Checkbox Colors --> < ul> < li> < ion-checkbox color="primary" checked="false"> < /ion-checkbox> < /li> < /ul> < ul> < li> < ion-checkbox color="secondary" checked="true"> < /ion-checkbox> < /li> < /ul> < ul> < li> < ion-checkbox color="light" checked="true"> < /ion-checkbox> < /li> < /ul> < ul> < li> < ion-checkbox color="dark" checked="false"> < /ion-checkbox> < /li> < /ul> < ul> < li> < ion-checkbox color="danger" checked="true"> < /ion-checkbox> < /li> < /ul> < /ion-content>

输出量

文章图片
列表中的复选框你也可以在列表中使用复选框。以下示例说明了复选框如何与列表一起使用。
例
Home.page.html

< ion-header> < ion-toolbar> < ion-title> CheckBox< /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light"> < !-- Checkboxes in a List --> < ion-list> < ion-item *ngFor="let entry of form"> < ion-label> {{entry.val}}< /ion-label> < ion-checkbox slot="start" [(ngModel)]="entry.isChecked"> < /ion-checkbox> < /ion-item> < /ion-list> < /ion-content>

Home.page.ts

import { Component } from '@angular/core'; @Component({selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })export class HomePage {public form = [ { val: 'Pok?mon Yellow' , isChecked: false}, { val: 'Super Metroid' , isChecked: true}, { val: 'Mega Man X' , isChecked: false}, { val: 'Spider Man' , isChecked: true}]; }

【Ionic复选框】输出量