ion-radio-group

概要(CONTENTS)

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

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

A radio group is a group of radio buttons. It allows a user to select at most one radio button from a set. Checking one radio button that belongs to a radio group unchecks any previous checked radio button within the same group.

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 true, the radios can be deselected.

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.