Question

Ionic4项目中我们可以使用Ionic4单选框组件ion-radio对项目进行布局。

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

Radios are generally used as a set of related options inside of a group, but they can also be used alone. Pressing on a radio will check it. They can also be checked programmatically by setting the checked property.

An ion-radio-group can be used to group a set of radios. When radios are inside of a radio group, only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time.

ion-radio　用法(Usage)

angularjavascriptreactvue

  
    
      Name
    

    
      Biff
      
    

    
      Griff
      
    

    
      Buford
      
    
  
</ion-list>

  
    
      Name
    

    
      Biff
      
    

    
      Griff
      
    

    
      Buford
      
    
  
</ion-list>

import React from 'react';

import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio } from '@ionic/react';

const Example: React.SFC = () => (

  
    
      
        Name
      

      
        Biff
        
      

      
        Griff
        
      

      
        Buford
        
      
    
  
);

export default Example

  
    
      
        Name
      

      
        Biff
        
      

      
        Griff
        
      

      
        Buford
        
      
    
  
</template>

ion-radio　属性(Properties)

checked
Description	If true, the radio 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 radio.
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 radio.
Attribute	value
Type	any

ion-radio　事件(Events)

Name	Description
ionBlur	Emitted when the radio button loses focus.
ionFocus	Emitted when the radio button has focus.
ionSelect	Emitted when the radio button is selected.

ion-radio中的CSS 自定义属性

Name	Description
--color	Color of the radio
--color-checked	Color of the checked radio