@tarojs/components
Version:
188 lines (187 loc) • 5.22 kB
TypeScript
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 }