Question

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)

angularjavascriptreactvue

  
    Pepperoni
    
  

  
    Sausage
    
  

  
    Mushrooms
    
  
</ion-list>

  
    Pepperoni
    
  

  
    Sausage
    
  

  
    Mushrooms
    
  
</ion-list>

import React from 'react';

import { IonToggle, IonList, IonItem, IonLabel } from '@ionic/react';

const Example: React.SFC = () => (
  
    {/*-- Default Toggle --*/}
    

    {/*-- Disabled Toggle --*/}
    

    {/*-- Checked Toggle --*/}
    

    {/*-- Toggle Colors --*/}
    
    
    
    
    

    {/*-- Toggles in a List --*/}
    
      
        Pepperoni
         {}}>
      

      
        Sausage
         {}} disabled={true}>
      

      
        Mushrooms
         {}}>
      
    
  
);

export default Example;

  
  

  
  

  
  

  
  
  
  
  
  

  
  
    
      Pepperoni
      
    

    
      Sausage
      
    

    
      Mushrooms
      
    
  
</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 <input type="checkbox">, it's only used when the toggle participates in a native <form>.
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