amis/docs/zh-CN/components/form/button-group-select.md

title	description	type	group	menuName	icon	order
Button-Group-Select 按钮点选		0	null	Button-Group-Select		6

基本用法

按钮集合当 select 点选用。

{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "debug": true,
  "body": [
    {
      "type": "button-group-select",
      "label": "选项",
      "name": "type",
      "options": [
        {
          "label": "Option A",
          "value": "a"
        },
        {
          "label": "Option B",
          "value": "b"
        },
        {
          "label": "Option C",
          "value": "c"
        }
      ]
    }
  ]
}

垂直模式

配置"vertical": true，实现垂直模式

{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "body": [
    {
      "type": "button-group-select",
      "label": "选项",
      "name": "type",
      "vertical": true,
      "options": [
        {
          "label": "Option A",
          "value": "a"
        },
        {
          "label": "Option B",
          "value": "b"
        },
        {
          "label": "Option C",
          "value": "c"
        }
      ]
    }
  ]
}

平铺模式

配置 "tiled": true 实现平铺模式

{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "body": [
    {
      "type": "button-group-select",
      "label": "选项",
      "name": "type",
      "tiled": true,
      "options": [
        {
          "label": "Option A",
          "value": "a"
        },
        {
          "label": "Option B",
          "value": "b"
        },
        {
          "label": "Option C",
          "value": "c"
        }
      ]
    }
  ]
}

按钮主题样式

配置 btnLevel 统一设置按钮主题样式，注意 buttons 或 options 中的level属性优先级高于btnLevel。配置 btnActiveLevel 为按钮设置激活态时的主题样式。

{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "debug": true,
  "body": [
    {
      "type": "button-group-select",
      "label": "选项",
      "name": "type",
      "btnLevel": "light",
      "btnActiveLevel": "warning",
      "options": [
        {
          "label": "Option A",
          "value": "a"
        },
        {
          "label": "Option B",
          "value": "b"
        },
        {
          "label": "Option C",
          "value": "c",
          "level": "primary"
        }
      ]
    }
  ]
}

支持角标

按钮可支持角标，在 options 中配置

{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "debug": true,
  "body": [
    {
      "type": "button-group-select",
      "label": "选项",
      "name": "type",
      "options": [
        {
          "label": "Option A",
          "value": "a"
        },
        {
          "label": "Option B",
          "value": "b",
          "badge": {
            "mode": "text",
            "text": 15
          }
        },
        {
          "label": "Option C",
          "value": "c",
          "badge": {
            "mode": "ribbon",
            "text": "HOT"
      }
        }
      ]
    }
  ]
}

属性表

当做选择器表单项使用时，除了支持 普通表单项属性表 中的配置以外，还支持下面一些配置

属性名	类型	默认值	说明	版本
type	string	"button-group-select"	指定为 button-group-select 渲染器
vertical	boolean	false	是否使用垂直模式
tiled	boolean	false	是否使用平铺模式
btnLevel	'link' | 'primary' | 'secondary' | 'info'|'success' | 'warning' | 'danger' | 'light'| 'dark' | 'default'	"default"	按钮样式
btnActiveLevel	'link' | 'primary' | 'secondary' | 'info'|'success' | 'warning' | 'danger' | 'light'| 'dark' | 'default'	"default"	选中按钮样式
options	Array<object>或Array<string>		选项组
option.badge	object		角标	2.8.1
source	string或 API		动态选项组
multiple	boolean	false	多选
labelField	boolean	"label"	选项标签字段
valueField	boolean	"value"	选项值字段
joinValues	boolean	true	拼接值
extractValue	boolean	false	提取值
autoFill	object		自动填充

事件表

当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过${事件参数名}或${event.data.[事件参数名]}来获取事件产生的数据，详细请查看事件动作。

[name]表示当前组件绑定的名称，即name属性，如果没有配置name属性，则通过value取值。

事件名称	事件参数	说明
change	[name]: string 组件的值	选中值变化时触发

动作表

当前组件对外暴露以下特性动作，其他组件可以通过指定actionType: 动作名称、componentId: 该组件id来触发这些动作，动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数，详细请查看事件动作。

动作名称	动作配置	说明
clear	-	清空
reset	-	将值重置为resetValue，若没有配置resetValue，则清空
reload	-	重新加载，调用 source，刷新数据域数据刷新（重新加载）
setValue	value: string 更新的值	更新数据