UNPKG

4.99 kBTypeScriptView Raw
1import { ComponentType } from 'react'
2import { StandardProps, CommonEventFunction, FormItemProps } from './common'
3interface RadioProps extends StandardProps {
4 /** `<Radio/>` 标识。当该`<Radio/>` 选中时，`<RadioGroup/>`的 change 事件会携带`<Radio/>`的 value
5 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
6 */
7 value?: string
8 /** 当前是否选中
9 * @default false
10 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
11 */
12 checked?: boolean
13 /** 是否禁用
14 * @default false
15 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
16 */
17 disabled?: boolean
18 /** Radio 的颜色，同 css 的 color
19 * @default "#09BB07"
20 * @supported weapp, alipay, swan, tt, qq, jd, rn
21 */
22 color?: string
23 /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
24 * @supported h5
25 */
26 nativeProps?: Record<string, unknown>
27 /** 无障碍访问，（属性）元素的额外描述
28 * @supported qq
29 */
30 ariaLabel?: string
31 /** <radio-group/> 中的选中项发生变化时触发 change 事件
32 * @supported h5, rn
33 */
34 onChange?: CommonEventFunction<{
35 value?: string
36 }>
37}
38/** 单选项目
39 * @classification forms
40 * @supported weapp, alipay, swan, tt, qq, h5, rn, harmony
41 * @example_react
42 * ```tsx
43 * export default class PageRadio extends Component {
44 * state = {
45 * list: [
46 * {
47 * value: '美国',
48 * text: '美国',
49 * checked: false
50 * },
51 * {
52 * value: '中国',
53 * text: '中国',
54 * checked: true
55 * },
56 * {
57 * value: '巴西',
58 * text: '巴西',
59 * checked: false
60 * },
61 * {
62 * value: '日本',
63 * text: '日本',
64 * checked: false
65 * },
66 * {
67 * value: '英国',
68 * text: '英国',
69 * checked: false
70 * },
71 * {
72 * value: '法国',
73 * text: '法国',
74 * checked: false
75 * }
76 * ]
77 * }
78 * render () {
79 * return (
80 * <View className='container'>
81 * <Head title='Radio' />
82 * <View className='page-body'>
83 * <View className='page-section'>
84 * <Text>默认样式</Text>
85 * <Radio value='选中' checked>选中</Radio>
86 * <Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio>
87 * </View>
88 * <View className='page-section'>
89 * <Text>推荐展示样式</Text>
90 * <View className='radio-list'>
91 * <RadioGroup>
92 * {this.state.list.map((item, i) => {
93 * return (
94 * <Label className='radio-list__label' for={i} key={i}>
95 * <Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
96 * </Label>
97 * )
98 * })}
99 * </RadioGroup>
100 * </View>
101 * </View>
102 * </View>
103 * </View>
104 * )
105 * }
106 * }
107 * ```
108 * @example_vue
109 * ```html
110 * <template>
111 * <view class="container">
112 * <view class="page-section">
113 * <text>默认样式</text>
114 * <radio value="选中" :checked="true">选中</radio>
115 * <radio style="margin-left: 20rpx;" value="未选中">未选中</radio>
116 * </view>
117 * <view class="page-section">
118 * <text>推荐展示样式(Taro 团队成员):</text>
119 * <radio-group `@change="onChange">
120 * <label v-for="item in list" class="checkbox-list__label">
121 * <radio class="checkbox-list__checkbox" :value="item.value" :checked="item.checked">{{ item.text }}</radio>
122 * </label>
123 * </radio-group>
124 * </view>
125 * </view>
126 * </template>
127 *
128 * <script>
129 * export default {
130 * data() {
131 * return {
132 * list: [
133 * {
134 * value: 'yuche',
135 * text: 'yuche',
136 * checked: false
137 * },
138 * {
139 * value: 'cjj',
140 * text: 'cjj',
141 * checked: false
142 * },
143 * {
144 * value: 'xiexiaoli',
145 * text: 'xiexiaoli',
146 * checked: false
147 * },
148 * {
149 * value: 'honly',
150 * text: 'honly',
151 * checked: false
152 * },
153 * {
154 * value: 'cs',
155 * text: 'cs',
156 * checked: false
157 * },
158 * {
159 * value: 'zhutianjian',
160 * text: 'zhutianjian',
161 * checked: false
162 * },
163 * {
164 * value: '隔壁老李',
165 * text: '隔壁老李',
166 * checked: true
167 * }
168 * ]
169 * }
170 * },
171 * methods: {
172 * onChange: function(e) {
173 * console.log(e.detail.value)
174 * }
175 * }
176 * }
177 * </script>
178 * ```
179 * @see https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
180 */
181declare const Radio: ComponentType<RadioProps>
182export { Radio, RadioProps }