UNPKG

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