import { ComponentType } from 'react' import { StandardProps, CommonEventFunction, FormItemProps } from './common' interface RadioProps extends StandardProps { /** `<Radio/>` 标识。当该`<Radio/>` 选中时,`<RadioGroup/>`的 change 事件会携带`<Radio/>`的 value * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid */ value?: string /** 当前是否选中 * @default false * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid */ checked?: boolean /** 是否禁用 * @default false * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid */ disabled?: boolean /** Radio 的颜色,同 css 的 color * @default "#09BB07" * @supported weapp, alipay, swan, tt, qq, jd, rn, harmony */ color?: string /** * Radio 的名字 * @supported h5, harmony, harmony_hybrid */ name?: string /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上 * @supported h5, harmony_hybrid */ nativeProps?: Record<string, unknown> /** 无障碍访问,(属性)元素的额外描述 * @supported qq */ ariaLabel?: string /** <radio-group/> 中的选中项发生变化时触发 change 事件 * @supported h5, rn, harmony, harmony_hybrid */ onChange?: CommonEventFunction<{ value?: string }> } /** 单选项目 * @classification forms * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony, harmony_hybrid * @example_react * ```tsx * export default class PageRadio extends Component { * state = { * list: [ * { * value: '美国', * text: '美国', * checked: false * }, * { * value: '中国', * text: '中国', * checked: true * }, * { * value: '巴西', * text: '巴西', * checked: false * }, * { * value: '日本', * text: '日本', * checked: false * }, * { * value: '英国', * text: '英国', * checked: false * }, * { * value: '法国', * text: '法国', * checked: false * } * ] * } * render () { * return ( * <View className='container'> * <Head title='Radio' /> * <View className='page-body'> * <View className='page-section'> * <Text>默认样式</Text> * <Radio value='选中' checked>选中</Radio> * <Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio> * </View> * <View className='page-section'> * <Text>推荐展示样式</Text> * <View className='radio-list'> * <RadioGroup> * {this.state.list.map((item, i) => { * return ( * <Label className='radio-list__label' for={i} key={i}> * <Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio> * </Label> * ) * })} * </RadioGroup> * </View> * </View> * </View> * </View> * ) * } * } * ``` * @example_vue * ```html * <template> * <view class="container"> * <view class="page-section"> * <text>默认样式</text> * <radio value="选中" :checked="true">选中</radio> * <radio style="margin-left: 20rpx;" value="未选中">未选中</radio> * </view> * <view class="page-section"> * <text>推荐展示样式(Taro 团队成员):</text> * <radio-group `@change="onChange"> * <label v-for="item in list" class="checkbox-list__label"> * <radio class="checkbox-list__checkbox" :value="item.value" :checked="item.checked">{{ item.text }}</radio> * </label> * </radio-group> * </view> * </view> * </template> * * <script> * export default { * data() { * return { * list: [ * { * value: 'yuche', * text: 'yuche', * checked: false * }, * { * value: 'cjj', * text: 'cjj', * checked: false * }, * { * value: 'xiexiaoli', * text: 'xiexiaoli', * checked: false * }, * { * value: 'honly', * text: 'honly', * checked: false * }, * { * value: 'cs', * text: 'cs', * checked: false * }, * { * value: 'zhutianjian', * text: 'zhutianjian', * checked: false * }, * { * value: '隔壁老李', * text: '隔壁老李', * checked: true * } * ] * } * }, * methods: { * onChange: function(e) { * console.log(e.detail.value) * } * } * } * </script> * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/component/radio.html */ declare const Radio: ComponentType<RadioProps> export { Radio, RadioProps }