antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
185 lines (158 loc) • 8.16 kB
Markdown
---
nav:
path: /components
group:
title: 数据录入
order: 10
toc: 'content'
supportPlatform: ['alipay', 'wechat']
---
在一组可选项中进行单选。
在 `index.json` 中引入组件
```json
"usingComponents": {
"ant-radio": "antd-mini/es/Radio/index",
"ant-radio-group": "antd-mini/es/Radio/RadioGroup/index"
"ant-radio": "antd-mini/Radio/index",
"ant-radio-group": "antd-mini/Radio/RadioGroup/index"
}
```
```xml
<ant-radio defaultChecked>初始值</ant-radio>
<ant-radio disabled>禁用按钮1</ant-radio>
<ant-radio color="red" defaultChecked>自定义颜色</ant-radio>
<ant-radio
onChange="onChange"
bindchange="onChange"
>
基础用法
</ant-radio>
```
```js
Page({
onChange(value, e) {
console.log(value, e);
},
});
```
```xml
<ant-radio
checked="{{checked}}"
onChange="handleChange"
bindchange="handleChange"
>
受控模式
</ant-radio>
```
```js
Page({
data: {
checked: false,
},
handleChange(checked) {
this.setData({
checked: checked.detail,
});
this.setData({
checked,
});
},
});
```
```xml
<ant-radio-group
value="{{value}}"
options="{{options}}"
onChange="handleRadioGroupChange"
bindchange="handleRadioGroupChange"
/>
```
```js
Page({
data: {
value: 'banana',
options: [
{ value: 'apple', label: '苹果' },
{ value: 'orange', label: '橘子' },
{ value: 'banana', label: '香蕉' },
],
},
handleRadioGroupChange(value) {
this.setData({
value: value.detail,
});
this.setData({
value,
});
},
});
```
<code src='../../demo/pages/Radio/index'></code>
| 属性 | 说明 | 类型 | 默认值 |
| ---------------------- | ---------------- | ----------------------------------------------------------------------------------------------------- | ------ |
| checked | 是否选中 | boolean | - |
| className | 类名 | string | - |
| disabled | 是否禁用 | boolean | false |
| color | 图标颜色 | string | - |
| defaultChecked | 是否默认选中 | boolean | false |
| style | 样式 | string | - |
| value | 携带的 value 值 | string | - |
|
|
| 属性 | 说明 | 类型 | 默认值 |
| ---------------------- | ------------------ | -------------------------------------------------------------------------------------------------- | ---------- |
| className | 类名 | string | - |
| color | 图标颜色 | string | - |
| disabled | 是否禁用 | boolean | false |
| defaultValue | 初始值 | string | - |
| label | 插槽，接收值和索引 | slot | - |
| options | 可选项 | `{label?: string; value?: string; disabled?: boolean;}[]` | - |
| position | 布局方式 | string | `vertical` |
| style | 样式 | string | - |
| value | 选中的值 | string | - |
|
|
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 变量名 | 默认值 | 深色模式默认值 | 备注 |
| -------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------- |
| --progress-stroke-color | <div style="width: 150px; height: 30px; background-color: #1677ff; color: #ffffff;">
| --progress-trail-color | <div style="width: 150px; height: 30px; background-color: #f5f5f5; color: #333333;">
| --progress-success-color | <div style="width: 150px; height: 30px; background-color: #22b35e; color: #ffffff;">
| --progress-indicator-color | <div style="width: 150px; height: 30px; background-color: #333333; color: #ffffff;">
| --progress-exception-color | <div style="width: 150px; height: 30px; background-color: #ff3141; color: #ffffff;">
| --progress-assist-color | <div style="width: 150px; height: 30px; background-color: #999999; color: #ffffff;">