ion-radio-group
コンテンツ
radio groupはradio buttonsのグループです。 1つのセットから最大1つのradio buttonを選択できます。 radio groupに属するradio buttonを1つ選択すると、 同じグループ内で以前に選択されていたradio buttonの選択が解除されます。
Interfaces
RadioGroupChangeEventDetail
interface RadioGroupChangeEventDetail<T = any> {
value: T;
}
RadioGroupCustomEvent
必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent
インターフェースの代わりにこのインターフェースを使用することが可能です。
interface RadioGroupCustomEvent<T = any> extends CustomEvent {
detail: RadioGroupChangeEventDetail<T>;
target: HTMLIonRadioGroupElement;
}
使い方
- Angular
- Javascript
- React
- Stencil
- Vue
<ion-list>
<ion-radio-group>
<ion-list-header>
<ion-label>
Auto Manufacturers
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Cord</ion-label>
<ion-radio value="cord"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Duesenberg</ion-label>
<ion-radio value="duesenberg"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Hudson</ion-label>
<ion-radio value="hudson"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Packard</ion-label>
<ion-radio value="packard"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Studebaker</ion-label>
<ion-radio value="studebaker"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<ion-list>
<ion-radio-group>
<ion-list-header>
<ion-label>
Auto Manufacturers
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Cord</ion-label>
<ion-radio value="cord"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Duesenberg</ion-label>
<ion-radio value="duesenberg"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Hudson</ion-label>
<ion-radio value="hudson"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Packard</ion-label>
<ion-radio value="packard"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Studebaker</ion-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, IonContent } from '@ionic/react';
export const RadioGroupExample: React.FC = () => (
<IonContent>
<IonList>
<IonRadioGroup>
<IonListHeader>
<IonLabel>
Auto Manufacturers
</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Cord</IonLabel>
<IonRadio value="cord" />
</IonItem>
<IonItem>
<IonLabel>Duesenberg</IonLabel>
<IonRadio value="duesenberg" />
</IonItem>
<IonItem>
<IonLabel>Hudson</IonLabel>
<IonRadio value="hudson" />
</IonItem>
<IonItem>
<IonLabel>Packard</IonLabel>
<IonRadio value="packard" />
</IonItem>
<IonItem>
<IonLabel>Studebaker</IonLabel>
<IonRadio value="studebaker" />
</IonItem>
</IonRadioGroup>
</IonList>
</IonContent>
);
import { Component, h } from '@stencil/core';
@Component({
tag: 'radio-group-example',
styleUrl: 'radio-group-example.css'
})
export class RadioGroupExample {
render() {
return [
<ion-list>
<ion-radio-group>
<ion-list-header>
<ion-label>
Auto Manufacturers
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Cord</ion-label>
<ion-radio value="cord"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Duesenberg</ion-label>
<ion-radio value="duesenberg"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Hudson</ion-label>
<ion-radio value="hudson"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Packard</ion-label>
<ion-radio value="packard"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Studebaker</ion-label>
<ion-radio value="studebaker"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
];
}
}
<template>
<ion-list>
<ion-radio-group>
<ion-list-header>
<ion-label>
Auto Manufacturers
</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Cord</ion-label>
<ion-radio value="cord"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Duesenberg</ion-label>
<ion-radio value="duesenberg"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Hudson</ion-label>
<ion-radio value="hudson"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Packard</ion-label>
<ion-radio value="packard"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Studebaker</ion-label>
<ion-radio value="studebaker"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
</template>
<script>
import {
IonItem,
IonLabel,
IonList,
IonListHeader,
IonRadio,
IonRadioGroup
} from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonItem,
IonLabel,
IonList,
IonListHeader,
IonRadio,
IonRadioGroup
}
});
</script>
プロパティ
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 |
Default | undefined |
イベント
Name | Description |
---|---|
ionChange | Emitted when the value has changed. |
メソッド
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
No CSS custom properties available for this component.
Slots
No slots available for this component.