amis/docs/zh-CN/components/form/radios.md

132 lines
3.5 KiB
Markdown
Raw Normal View History

2020-09-02 15:30:16 +08:00
---
title: Radios 单选框
description:
type: 0
group: null
menuName: Radios 单选框
icon:
order: 36
---
用于实现单选。
2020-09-02 15:30:16 +08:00
## 基本用法
```schema: scope="body"
2020-09-02 15:30:16 +08:00
{
"type": "form",
"controls": [
{
"name": "radios",
"type": "radios",
"label": "radios",
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
```
## 列显示
2021-04-03 00:17:51 +08:00
设置 `inline` 可以纵向显示,用于显示列很多的情况
2021-04-03 00:17:51 +08:00
```schema: scope="body"
{
"type": "form",
"controls": [
{
"name": "radios",
"type": "radios",
"label": "radios",
"inline": false,
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
```
## 控制列显示的分裂
通过 columnsCount 来设置列显示的列数,比如下面例子是两列。
```schema: scope="body"
{
"type": "form",
"controls": [
{
"name": "radios",
"type": "radios",
"label": "radios",
"inline": false,
"columnsCount": 2,
2021-04-03 00:17:51 +08:00
"options": [
{
"label": "OptionA",
"value": "a"
},
{
"label": "OptionB",
"value": "b"
},
{
"label": "OptionC",
"value": "c"
},
{
"label": "OptionD",
"value": "d"
}
]
}
]
}
```
2020-09-02 15:30:16 +08:00
## 属性表
当做选择器表单项使用时,除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置
| 属性名 | 类型 | 默认值 | 说明 |
| ------------ | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
| source | `string`或 [API](../../../docs/types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
| columnsCount | `number` | `1` | 选项按几列显示,默认为一列 |
| inline | `boolean` | `true` | 是否显示为一行 |
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |