ion-radio-group
Ionic4项目中我们可以使用Ionic4单选框组件ion-radio-group对项目进行布局。 ion-radio-group官方文档地址:https://ionicframework.com/docs/api/radio-groupA radio group is a group of
ion-radio-group 用法(Usage)
<ion-list>
<ion-radio-group>
<ion-list-header>
Auto Manufacturers
ion-list-header>
<ion-item>
<ion-label>Cordion-label>
<ion-radio value="cord">ion-radio>
ion-item>
<ion-item>
<ion-label>Duesenbergion-label>
<ion-radio value="duesenberg">ion-radio>
ion-item>
<ion-item>
<ion-label>Hudsonion-label>
<ion-radio value="hudson">ion-radio>
ion-item>
<ion-item>
<ion-label>Packardion-label>
<ion-radio value="packard">ion-radio>
ion-item>
<ion-item>
<ion-label>Studebakerion-label>
<ion-radio value="studebaker">ion-radio>
ion-item>
ion-radio-group>
ion-list>
<ion-list>
<ion-radio-group>
<ion-list-header>
Auto Manufacturers
ion-list-header>
<ion-item>
<ion-label>Cordion-label>
<ion-radio value="cord">ion-radio>
ion-item>
<ion-item>
<ion-label>Duesenbergion-label>
<ion-radio value="duesenberg">ion-radio>
ion-item>
<ion-item>
<ion-label>Hudsonion-label>
<ion-radio value="hudson">ion-radio>
ion-item>
<ion-item>
<ion-label>Packardion-label>
<ion-radio value="packard">ion-radio>
ion-item>
<ion-item>
<ion-label>Studebakerion-label>
<ion-radio value="studebaker">ion-radio>
ion-item>
ion-radio-group>
ion-list>
import React from 'react';
import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonRadio, IonItem } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<IonList>
<IonRadioGroup>
<IonListHeader>
Auto Manufacturers
IonListHeader>
<IonItem>
<IonLabel>CordIonLabel>
<IonRadio value="cord">IonRadio>
IonItem>
<IonItem>
<IonLabel>DuesenbergIonLabel>
<IonRadio value="duesenberg">IonRadio>
IonItem>
<IonItem>
<IonLabel>HudsonIonLabel>
<IonRadio value="hudson">IonRadio>
IonItem>
<IonItem>
<IonLabel>PackardIonLabel>
<IonRadio value="packard">IonRadio>
IonItem>
<IonItem>
<IonLabel>StudebakerIonLabel>
<IonRadio value="studebaker">IonRadio>
IonItem>
IonRadioGroup>
IonList>
);
export default Example
<template>
<ion-list>
<ion-radio-group>
<ion-list-header>
Auto Manufacturers
ion-list-header>
<ion-item>
<ion-label>Cordion-label>
<ion-radio value="cord">ion-radio>
ion-item>
<ion-item>
<ion-label>Duesenbergion-label>
<ion-radio value="duesenberg">ion-radio>
ion-item>
<ion-item>
<ion-label>Hudsonion-label>
<ion-radio value="hudson">ion-radio>
ion-item>
<ion-item>
<ion-label>Packardion-label>
<ion-radio value="packard">ion-radio>
ion-item>
<ion-item>
<ion-label>Studebakerion-label>
<ion-radio value="studebaker">ion-radio>
ion-item>
ion-radio-group>
ion-list>
template>
ion-radio-group 属性(Properties)
allowEmptySelection | |
---|---|
Description | If |
Attribute | allow-empty-selection |
Type | boolean |
Default | false |
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 group. |
Attribute | value |
Type | any |
ion-radio-group 事件(Events)
Name | Description |
---|---|
ionChange | Emitted when the value has changed. |