Flutter教程

ion-toggle

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4开关组件ion-toggle对项目进行布局。

ion-toggle官方文档地址:https://ionicframework.com/docs/api/toggle

Toggles 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 true, the toggle is selected.

Attribute checked
Type boolean
Default false

color

Description

The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

Attribute color
Type string | undefined

disabled

Description

If true, the user cannot interact with the toggle.

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 checked property for that.

The value of a toggle is analogous to the value of a , it's only used when the toggle participates in a native

.

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