ion-radio

Contents

Radioは一般的にグループ内の関連するオプションに対して使用します。 しかし、単独で使用することも可能です。 Radioを押すことでチェックがつきます。 checkedプロパティを設定することで、プログラム的にチェックをつけることも可能です。

ion-radio-groupはRadioのセットをグループ化するために使用されます。 Radioがradio groupの内部にある時は, 常にグループ内の1つのみチェックがつきます。 Radioを押すことでチェックがつき、既にチェックされたものはチェックが消えます。 もしRadioが他のRadioと同じグループに属さない場合、それらは同時にチェックをつけることが可能です。

利用方法

<ion-list>
  <ion-radio-group>
    <ion-list-header>
      <ion-label>Name</ion-label>
    </ion-list-header>

    <ion-item>
      <ion-label>Biff</ion-label>
      <ion-radio slot="start" value="biff" checked></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Griff</ion-label>
      <ion-radio slot="start" value="griff"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Buford</ion-label>
      <ion-radio slot="start" value="buford"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>
<ion-list>
  <ion-radio-group>
    <ion-list-header>
      <ion-label>Name</ion-label>
    </ion-list-header>

    <ion-item>
      <ion-label>Biff</ion-label>
      <ion-radio slot="start" value="biff" checked></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Griff</ion-label>
      <ion-radio slot="start" value="griff"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Buford</ion-label>
      <ion-radio slot="start" value="buford"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>
import React from 'react';
import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonContent } from '@ionic/react';

export const RadioExample: React.FunctionComponent = () => (
  <IonContent>
    <IonList>
      <IonRadioGroup>
        <IonListHeader>
          <IonLabel>Name</IonLabel>
        </IonListHeader>

        <IonItem>
          <IonLabel>Biff</IonLabel>
          <IonRadio slot="start" value="biff" checked />
        </IonItem>

        <IonItem>
          <IonLabel>Griff</IonLabel>
          <IonRadio slot="start" value="griff" />
        </IonItem>

        <IonItem>
          <IonLabel>Buford</IonLabel>
          <IonRadio slot="start" value="buford" />
        </IonItem>
      </IonRadioGroup>
    </IonList>
  </IonContent>
);
<template>
  <ion-list>
    <ion-radio-group>
      <ion-list-header>
        <ion-label>Name</ion-label>
      </ion-list-header>

      <ion-item>
        <ion-label>Biff</ion-label>
        <ion-radio slot="start" value="biff" checked></ion-radio>
      </ion-item>

      <ion-item>
        <ion-label>Griff</ion-label>
        <ion-radio slot="start" value="griff"></ion-radio>
      </ion-item>

      <ion-item>
        <ion-label>Buford</ion-label>
        <ion-radio slot="start" value="buford"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>
</template>

プロパティ

checked

Description

If true, the radio is selected.

Attributechecked
Typeboolean
Defaultfalse

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.

Attributecolor
Typestring | undefined

disabled

Description

If true, the user cannot interact with the radio.

Attributedisabled
Typeboolean
Defaultfalse

mode

Description

The mode determines which platform styles to use.

Attributemode
Type"ios" | "md"

name

Description

The name of the control, which is submitted with the form data.

Attributename
Typestring
Defaultthis.inputId

value

Description

the value of the radio.

Attributevalue
Typeany

イベント

NameDescription
ionBlurEmitted when the radio button loses focus.
ionFocusEmitted when the radio button has focus.
ionSelectEmitted when the radio button is selected.

CSSカスタムプロパティ

NameDescription
--colorColor of the radio
--color-checkedColor of the checked radio
View Source