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}
  ];
}

输出量