ion-toggle
Ionic4项目中我们可以使用Ionic4开关组件ion-toggle对项目进行布局。 ion-toggle官方文档地址:https://ionicframework.com/docs/api/toggleToggles change the state of a single option. Toggles can be switched on or off by pressing or swiping them. They can also be checked programmatically by setting the checked
property.
ion-toggle 用法(Usage)
<ion-toggle>ion-toggle>
<ion-toggle disabled>ion-toggle>
<ion-toggle checked>ion-toggle>
<ion-toggle color="primary">ion-toggle>
<ion-toggle color="secondary">ion-toggle>
<ion-toggle color="danger">ion-toggle>
<ion-toggle color="light">ion-toggle>
<ion-toggle color="dark">ion-toggle>
<ion-list>
<ion-item>
<ion-label>Pepperoniion-label>
<ion-toggle [(ngModel)]="pepperoni">ion-toggle>
ion-item>
<ion-item>
<ion-label>Sausageion-label>
<ion-toggle [(ngModel)]="sausage" disabled="true">ion-toggle>
ion-item>
<ion-item>
<ion-label>Mushroomsion-label>
<ion-toggle [(ngModel)]="mushrooms">ion-toggle>
ion-item>
ion-list>
<ion-toggle>ion-toggle>
<ion-toggle disabled>ion-toggle>
<ion-toggle checked>ion-toggle>
<ion-toggle color="primary">ion-toggle>
<ion-toggle color="secondary">ion-toggle>
<ion-toggle color="danger">ion-toggle>
<ion-toggle color="light">ion-toggle>
<ion-toggle color="dark">ion-toggle>
<ion-list>
<ion-item>
<ion-label>Pepperoniion-label>
<ion-toggle slot="end" value="pepperoni" checked>ion-toggle>
ion-item>
<ion-item>
<ion-label>Sausageion-label>
<ion-toggle slot="end" value="sausage" disabled>ion-toggle>
ion-item>
<ion-item>
<ion-label>Mushroomsion-label>
<ion-toggle slot="end" value="mushrooms">ion-toggle>
ion-item>
ion-list>
import React from 'react';
import { IonToggle, IonList, IonItem, IonLabel } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default Toggle --*/}
<IonToggle>IonToggle>
{/*-- Disabled Toggle --*/}
<IonToggle disabled>IonToggle>
{/*-- Checked Toggle --*/}
<IonToggle checked>IonToggle>
{/*-- Toggle Colors --*/}
<IonToggle color="primary">IonToggle>
<IonToggle color="secondary">IonToggle>
<IonToggle color="danger">IonToggle>
<IonToggle color="light">IonToggle>
<IonToggle color="dark">IonToggle>
{/*-- Toggles in a List --*/}
<IonList>
<IonItem>
<IonLabel>PepperoniIonLabel>
<IonToggle value="pepperoni" onChange={() => {}}>IonToggle>
IonItem>
<IonItem>
<IonLabel>SausageIonLabel>
<IonToggle value="sausage" onChange={() => {}} disabled={true}>IonToggle>
IonItem>
<IonItem>
<IonLabel>MushroomsIonLabel>
<IonToggle value="mushrooms" onChange={() => {}}>IonToggle>
IonItem>
IonList>
>
);
export default Example;
<template>
<ion-toggle>ion-toggle>
<ion-toggle disabled>ion-toggle>
<ion-toggle checked>ion-toggle>
<ion-toggle color="primary">ion-toggle>
<ion-toggle color="secondary">ion-toggle>
<ion-toggle color="danger">ion-toggle>
<ion-toggle color="light">ion-toggle>
<ion-toggle color="dark">ion-toggle>
<ion-list>
<ion-item>
<ion-label>Pepperoniion-label>
<ion-toggle @ionChange="toppings.push($event.target.value)" value="pepperoni" v-bind:checked="toppings.indexOf('pepperoni') !== -1">ion-toggle>
ion-item>
<ion-item>
<ion-label>Sausageion-label>
<ion-toggle @ionChange="toppings.push($event.target.value)" value="sausage" v-bind:checked="toppings.indexOf('pepperoni') !== -1" disabled="true">ion-toggle>
ion-item>
<ion-item>
<ion-label>Mushroomsion-label>
<ion-toggle @ionChange="toppings.push($event.target.value)" value="mushrooms" v-bind:checked="toppings.indexOf('pepperoni') !== -1">ion-toggle>
ion-item>
ion-list>
template>
ion-toggle 属性(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 |
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 | null | string | undefined |
Default | 'on' |
ion-toggle 事件(Events)
Name | Description |
---|---|
ionBlur | Emitted when the toggle loses focus. |
ionChange | Emitted when the value property has changed. |
ionFocus | Emitted when the toggle has focus. |
ion-toggle中的CSS 自定义属性
Name | Description |
---|---|
--background | Background of the toggle |
--background-checked | Background of the toggle when checked |
--handle-background | Background of the toggle handle |
--handle-background-checked | Background of the toggle handle when checked |