跳到主要内容

Radio 单选框

介绍

单选框

用法

基础

<OsRadio>
<OsRadioOption value={v1} optionValue={0} onClick={setV1}>
选项A
</OsRadioOption>
<OsRadioOption value={v1} optionValue={1} onClick={setV1}>
选项B
</OsRadioOption>
</OsRadio>

// 选项内容自定义
<OsRadio>
<OsRadioOption value={v2} optionValue={0} onClick={setV2} isCustom>
<View className='custom-option'>
<Image
className='custom-option__img'
src='https://yanxuan-item.nosdn.127.net/8aafd2aa11a023d69ec1dfbc062b28c7.png?quality=95&thumbnail=245x245&imageView'
/>
<View className='custom-option__content'>
<View className='custom-option__title'>西装</View>
<View className='custom-option__sub-title'>
帅气的办公室吸睛装扮
</View>
<View className='custom-option__price'>&yen;299</View>
</View>
</View>
</OsRadioOption>
<OsRadioOption value={v2} optionValue={1} onClick={setV2} isCustom>
<View className='custom-option'>
<Image
className='custom-option__img'
src='https://yanxuan.nosdn.127.net/b3dec0eb768d27301afab1b4a43f30cb.png?quality=95&thumbnail=172x172&imageView'
/>
<View className='custom-option__content'>
<View className='custom-option__title'>
网易智造四季全屋循环扇
</View>
<View className='custom-option__sub-title'>
源自日本,全屋空气对流循环
</View>
<View className='custom-option__price'>&yen;248.1</View>
</View>
</View>
</OsRadioOption>
</OsRadio>

禁用

<OsRadio>
<OsRadioOption value={v3} optionValue={0} onClick={setV3} isDisabled>
选项A
</OsRadioOption>
<OsRadioOption value={v3} optionValue={1} onClick={setV3} isDisabled>
选项B
</OsRadioOption>
</OsRadio>

不可执行

<OsRadio>
<OsRadioOption value={v5} optionValue={0} onClick={setV5} isReadonly>
选项A
</OsRadioOption>
<OsRadioOption value={v5} optionValue={1} onClick={setV5} isReadonly>
选项B
</OsRadioOption>
</OsRadio>

横向布局

<OsRadio type='row'>
<OsRadioOption value={v7} optionValue={0} onClick={setV7} type='row'>
选项A
</OsRadioOption>
<OsRadioOption value={v7} optionValue={1} onClick={setV7} type='row'>
选项B
</OsRadioOption>
</OsRadio>
<OsRadioOption value={v7} optionValue={0} onClick={setV7} type='row'>
选项A
</OsRadioOption>
<OsRadioOption value={v7} optionValue={1} onClick={setV7} type='row'>
选项B
</OsRadioOption>

API

radio属性

参数说明类型默认值
type布局类型column | rowcolumn
value选中值,可选number | string-
isDisabled失效状态,可选boolean-
isReadonly不可执行,可选boolean-

radio方法

函数名说明参数
onChange点击时触发,可选value

radioOption属性

参数说明类型默认值
value选中值,可选number | string-
optionValue选项值,必选number | string-
isDisabled失效状态,可选booleanfalse
isCustom是否自定义,可选booleanfalse
isReadonly不可执行,可选booleanfalse

radioOption方法

函数名说明参数
onClick点击时触发,可选value