UNPKG

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