ion-checkbox
Ionic4项目中我们可以使用Ionic4多选框组件ion-checkbox对项目进行布局。 ion-checkbox官方文档地址:https://ionicframework.com/docs/api/checkboxCheckboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the checked
property. They can also be checked programmatically by setting the checked
property.
ion-checkbox 用法(Usage)
<ion-checkbox>ion-checkbox>
<ion-checkbox disabled="true">ion-checkbox>
<ion-checkbox checked="true">ion-checkbox>
<ion-checkbox color="primary">ion-checkbox>
<ion-checkbox color="secondary">ion-checkbox>
<ion-checkbox color="danger">ion-checkbox>
<ion-checkbox color="light">ion-checkbox>
<ion-checkbox color="dark">ion-checkbox>
<ion-list>
<ion-item *ngFor="let entry of form">
<ion-label>{{entry.val}}ion-label>
<ion-checkbox slot="end" [(ngModel)]="entry.isChecked">ion-checkbox>
ion-item>
ion-list>
import { Component } from '@angular/core';
@Component({
selector: 'app-page-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage {
public form = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: false }
];
}
<ion-checkbox>ion-checkbox>
<ion-checkbox disabled>ion-checkbox>
<ion-checkbox checked>ion-checkbox>
<ion-checkbox color="primary">ion-checkbox>
<ion-checkbox color="secondary">ion-checkbox>
<ion-checkbox color="danger">ion-checkbox>
<ion-checkbox color="light">ion-checkbox>
<ion-checkbox color="dark">ion-checkbox>
<ion-list>
<ion-item>
<ion-label>Pepperoniion-label>
<ion-checkbox slot="end" value="pepperoni" checked>ion-checkbox>
ion-item>
<ion-item>
<ion-label>Sausageion-label>
<ion-checkbox slot="end" value="sausage" disabled>ion-checkbox>
ion-item>
<ion-item>
<ion-label>Mushroomsion-label>
<ion-checkbox slot="end" value="mushrooms">ion-checkbox>
ion-item>
ion-list>
import React from 'react';
import { IonCheckbox, IonList, IonItem, IonLabel } from '@ionic/react';
const form = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: false }
];
const CheckboxExample: React.SFC<{}> = () => (
<>
{/*-- Default Checkbox --*/}
<IonCheckbox />
{/*-- Disabled Checkbox --*/}
<IonCheckbox disabled={true} />
{/*-- Checked Checkbox --*/}
<IonCheckbox checked={true} />
{/*-- Checkbox Colors --*/}
<IonCheckbox color="primary" />
<IonCheckbox color="secondary" />
<IonCheckbox color="danger" />
<IonCheckbox color="light" />
<IonCheckbox color="dark" />
{/*-- Checkboxes in a List --*/}
<IonList>
{ form.map(({val, isChecked}) => (
<IonItem key={val}>
<IonLabel>{{val}}IonLabel>
<IonCheckbox slot="end" value={val} checked={isChecked} />
IonItem>
)) }
IonList>
>
);
export default CheckboxExample;
<template>
<ion-checkbox>ion-checkbox>
<ion-checkbox disabled="true">ion-checkbox>
<ion-checkbox checked="true">ion-checkbox>
<ion-checkbox color="primary">ion-checkbox>
<ion-checkbox color="secondary">ion-checkbox>
<ion-checkbox color="danger">ion-checkbox>
<ion-checkbox color="light">ion-checkbox>
<ion-checkbox color="dark">ion-checkbox>
<ion-list>
<ion-item v-for="entry in form">
<ion-label>{{entry.val}}ion-label>
<ion-checkbox slot="end" v-on:input="entry.checked = $event.target.value" v-bind:value="entry.isChecked">ion-checkbox>
ion-item>
ion-list>
template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Example extends Vue {
form = [
{ val: 'Pepperoni', isChecked: true },
{ val: 'Sausage', isChecked: false },
{ val: 'Mushroom', isChecked: false }
];
}
script>
ion-checkbox 属性(Properties)
checked | |
---|---|
Description | If |
Attribute | checked |
Type | boolean |
Default | false |
color | |
Description | The color to use from your application's color palette.
Default options are: |
Attribute | color |
Type | string | undefined |
disabled | |
Description | If |
Attribute | disabled |
Type | boolean |
Default | false |
indeterminate | |
Description | If |
Attribute | indeterminate |
Type | boolean |
Default | false |
mode | |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
name | |
Description | The name of the control, which is submitted with the form data. |
Attribute | name |
Type | string |
Default | this.inputId |
value | |
Description | The value of the toggle does not mean if it's checked or not, use the The value of a toggle is analogous to the value of a |
Attribute | value |
Type | string |
Default | 'on' |
ion-checkbox 事件(Events)
Name | Description |
---|---|
ionBlur | Emitted when the toggle loses focus. |
ionChange | Emitted when the checked property has changed. |
ionFocus | Emitted when the toggle has focus. |
ion-checkbox中的CSS 自定义属性
Name | Description |
---|---|
--background | Background of the checkbox icon |
--background-checked | Background of the checkbox icon when checked |
--border-color | Border color of the checkbox icon |
--border-color-checked | Border color of the checkbox icon when checked |
--border-radius | Border radius of the checkbox icon |
--border-style | Border style of the checkbox icon |
--border-width | Border width of the checkbox icon |
--checkmark-color | Color of the checkbox checkmark when checked |
--size | Size of the checkbox icon |
--transition | Transition of the checkbox icon |