ion-radio
收音机应该在收音机的内部使用
ion-radio-group
ion-radio-group
这台收音机的价值
当收音机在无线电组内时,在任何时候,无线电组内只有一台收音机会被检查。按下收音机将选中它,如果有之前选中的收音机,则取消选中。如果一台收音机与另一台收音机不在同一组中,那么这两台收音机将具有同时被检查的能力。
使用
<
ion-list
>
<
ion-radio-group
价值
=
"
强打
"
>
<
ion-list-header
>
<
ion-label
>
的名字
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-label
>
强打
ion-label
>
<
ion-radio
槽
=
"
开始
"
价值
=
"
强打
"
>
ion-radio
>
ion-item
>
<
ion-item
>
<
ion-label
>
女孩
ion-label
>
<
ion-radio
槽
=
"
开始
"
价值
=
"
女孩
"
>
ion-radio
>
ion-item
>
<
ion-item
>
<
ion-label
>
布福德
ion-label
>
<
ion-radio
槽
=
"
开始
"
价值
=
"
布福德
"
>
ion-radio
>
ion-item
>
ion-radio-group
>
ion-list
>
复制
复制
<
ion-list
>
<
ion-radio-group
价值
=
"
强打
"
>
<
ion-list-header
>
<
ion-label
>
的名字
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-label
>
强打
ion-label
>
<
ion-radio
槽
=
"
开始
"
价值
=
"
强打
"
>
ion-radio
>
ion-item
>
<
ion-item
>
<
ion-label
>
女孩
ion-label
>
<
ion-radio
槽
=
"
开始
"
价值
=
"
女孩
"
>
ion-radio
>
ion-item
>
<
ion-item
>
<
ion-label
>
布福德
ion-label
>
<
ion-radio
槽
=
"
开始
"
价值
=
"
布福德
"
>
ion-radio
>
ion-item
>
ion-radio-group
>
ion-list
>
复制
复制
进口
反应
,
{
useState
}
从
“反应”
;
进口
{
IonContent
,
IonHeader
,
IonPage
,
IonTitle
,
IonToolbar
,
IonList
,
IonRadioGroup
,
IonListHeader
,
IonLabel
,
IonItem
,
IonRadio
,
IonItemDivider
}
从
“@betway东盟体育appionic /反应”
;
出口
常量
RadioExamples
:
反应
.
足球俱乐部
=
(
)
=>
{
常量
[
选择
,
setSelected
]
=
useState
<
字符串
>
(“biff”);回报(
<
IonPage
>
<
IonHeader
>
<
IonToolbar
>
<
IonTitle
>
广播的例子
IonTitle
>
IonToolbar
>
IonHeader
>
<
IonContent
>
<
IonList
>
<
IonRadioGroup
价值
=
{
选择
}
onIonChange
=
{
e
=>
setSelected
(
e
.
细节
.
价值
)
}
>
<
IonListHeader
>
<
IonLabel
>
的名字
IonLabel
>
IonListHeader
>
<
IonItem
>
<
IonLabel
>
强打
IonLabel
>
<
IonRadio
槽
=
"
开始
"
价值
=
"
强打
"
/>
IonItem
>
<
IonItem
>
<
IonLabel
>
女孩
IonLabel
>
<
IonRadio
槽
=
"
开始
"
价值
=
"
女孩
"
/>
IonItem
>
<
IonItem
>
<
IonLabel
>
布福德
IonLabel
>
<
IonRadio
槽
=
"
开始
"
价值
=
"
布福德
"
/>
IonItem
>
IonRadioGroup
>
<
IonItemDivider
>
您的选择
IonItemDivider
>
<
IonItem
>
{
选择
??
(没有选择的
}
IonItem
>
IonList
>
IonContent
>
IonPage
>
);};
复制
复制
进口
{
组件
,
h
}
从
“@stencil /核心”
;
@
组件
(
{
标签
:
“radio-example”
,
styleUrl
:
“radio-example.css”
}
)
出口
类
RadioExample
{
渲染
(
)
{
返回
[
<
ion-list
>
<
ion-radio-group
价值
=
"
强打
"
>
<
ion-list-header
>
<
ion-label
>
的名字
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-label
>
强打
ion-label
>
<
ion-radio
槽
=
"
开始
"
价值
=
"
强打
"
>
ion-radio
>
ion-item
>
<
ion-item
>
<
ion-label
>
女孩
ion-label
>
<
ion-radio
槽
=
"
开始
"
价值
=
"
女孩
"
>
ion-radio
>
ion-item
>
<
ion-item
>
<
ion-label
>
布福德
ion-label
>
<
ion-radio
槽
=
"
开始
"
价值
=
"
布福德
"
>
ion-radio
>
ion-item
>
ion-radio-group
>
ion-list
>
]
;
}
}
复制
复制
<
模板
>
<
ion-list
>
<
ion-radio-group
价值
=
"
强打
"
>
<
ion-list-header
>
<
ion-label
>
的名字
ion-label
>
ion-list-header
>
<
ion-item
>
<
ion-label
>
强打
ion-label
>
<
ion-radio
槽
=
"
开始
"
价值
=
"
强打
"
>
ion-radio
>
ion-item
>
<
ion-item
>
<
ion-label
>
女孩
ion-label
>
<
ion-radio
槽
=
"
开始
"
价值
=
"
女孩
"
>
ion-radio
>
ion-item
>
<
ion-item
>
<
ion-label
>
布福德
ion-label
>
<
ion-radio
槽
=
"
开始
"
价值
=
"
布福德
"
>
ion-radio
>
ion-item
>
ion-radio-group
>
ion-list
>
模板
>
<
脚本
>
进口
{
IonItem
,
IonLabel
,
IonList
,
IonListHeader
,
IonRadio
,
IonRadioGroup
}
从
“@betway东盟体育appionic / vue”
;
进口
{
defineComponent
}
从
“vue”
;
出口
默认的
defineComponent
(
{
组件
:
{
IonItem
,
IonLabel
,
IonList
,
IonListHeader
,
IonRadio
,
IonRadioGroup
}
}
)
;
脚本
>
复制
复制
属性
颜色 |
|
---|---|
描述 |
应用程序调色板中要使用的颜色。默认的选项是: |
属性 |
颜色 |
类型 |
字符串|未定义 |
禁用 |
|
描述 |
如果 |
属性 |
禁用 |
类型 |
布尔 |
默认的 |
假 |
模式 |
|
描述 |
模式决定使用哪种平台样式。 |
属性 |
模式 |
类型 |
“ios”|“医学博士” |
的名字 |
|
描述 |
控件的名称,该控件与表单数据一起提交。 |
属性 |
的名字 |
类型 |
字符串 |
默认的 |
this.inputId |
价值 |
|
描述 |
收音机的价值。 |
属性 |
价值 |
类型 |
任何 |
事件
的名字 | 描述 |
---|---|
ionBlur |
单选按钮失去焦点时触发。 |
ionFocus |
单选按钮有焦点时触发。 |
CSS阴影部分
的名字 | 描述 |
---|---|
容器 |
装无线电标志的容器。 |
马克 |
用来表示被选中状态的复选标记或圆点。 |
CSS自定义属性
的名字 | 描述 |
---|---|
——这个特性 |
无线电的边界半径 |
——颜色 |
收音机的颜色 |
——color-checked |
检查过的收音机的颜色 |
——inner-border-radius |
内部检查无线电的边界半径 |