---
nav: 
  title: 组件
  order: 2
group:
 title: 其他
 order: 3
title: ButtonGroup
order: 1
toc: content
---

# ButtonGroup


### 基本使用
<code  src="../../src/ButtonGroup/demos/basic.tsx" ></code>



### 文本按钮组
文本按钮组用法，配置`type='text'`
<code  src="../../src/ButtonGroup/demos/text.tsx" ></code>


### 表格文本按钮组
配置`type='action'`
<code  src="../../src/ButtonGroup/demos/action.tsx" ></code>

## API

| 参数      | 说明                                      | 类型         | 默认值 | 参考值 |
|----------|------------------------------------------|-------------|-------|-------|
| type | 展示为按钮或文本 | String | button | 可选值 `button`,`text`, `action`(表格内使用）|
| options | 按钮组列表，字段参考[options API](#options-api) |  Array<{ name: string, code: string, disabled?: boolean , isHide?: boolean }> | - |- |
| codes | 功能权限数据，数组对象字段参考[codes API](#codes-api)| Array<{name: string, code: string,icon: string}> | - | - |
| permissionCodes | 当前有权限的按钮code值组合 | Array | - | `["codeBtnDetail", "codeBtnDetail"]` |
| min | 最小可展示按钮数量 | Number | 3 | 不得低于1(`type='action'`下最小数量为2） |
| rowParams | 用于通用表格组件行数据参数传入 | Object<{text, record,rowIndex}> | - | - |
| dropdownConfig | 下拉浮层相关配置(应用所有下拉菜单，优先级低于内部配置） | 参考官方dropdown API | - | - |
| moreText | "更多"按钮显示的文本 | string| - | - |
| moreIcon | "更多"按钮后面显示的图标，返回null则不显示 | ReactNode | - | - |
| showTextIcon | `type='text'`时，是否显示图标 | Boolean |`false` | - |
| size | `type='button'`时，可以配置默认按钮组大小 | Boolean | - | - |
| className | 样式类 | string| - | - |
| style | 行内样式 | Object | - | - |
| unlimited | 是否不限制展示数量，配置为true时，min值将无效 | `Boolean` | false | - |
| getValidButtons`v4.1.27` | 获取当前组件内有权限的按钮 | `(buttons, type)=>void` |  | - |

### options API

| 参数字段      | 说明  |   类型   |必选项| 参考值|
|----------|------|-------------|------|------|
| name | 名称 | `String` | 是 |- |
| type | 设置按钮类型  | `String` | 否 | `primary`/`dashed`/`link` / `text` / `default`|
| exName | 默认名称(优先级高于code与name配置值)  | `String` | 否 | 如果设置为`null`,则不显示名称(适用于code匹配到的情况下只显示对应图标的按钮）|
| code | 指定按钮权限code | `String` | 否 | -|
| isHide | 是否隐藏 | `Boolean/Function()`| 否 | 表格操作列的Function参数是(text,record,index) |
| disabled | 是否禁用 | `Boolean/Function()` | 否 | 表格操作列的Function参数是(text,record,index) |
| children | 是否显示成多级层级数据 | `Array`| 否 | 数据维度与options API一致 |
| icon | 指定按钮图标 | `String/ReactNode/Array` | 否 |  字段参考[icon API](#icon-api)|
| fn | 按钮点击事件 |`Function({...item, event, rowParams})` `Function(text, record, index, {event, ...item})`  | 否 | `type=action`参数会包含表格行与render对应的参数及最后一个参数内有event|
| render | 默认渲染结构 |`ReactNode/Function()` | 否 | -|
| confirmText | 配置点击显示气泡确认框标题 |`String/Function()` | 否 | 表格操作列的Function参数是(text,record,index)|
| confirmConfig |  气泡确认框扩展配置，同官网API()| `Object`| 否 | onConfirm,onCancel在表格操作列的参数是(text,record,index,other)，优先级高于fn;title优先级高于confirmText;折叠在`更多`项内配置刚需要同时配置`rowParams.rowIndex`,否则浮层在点击后立即消失|
| dropdownConfig | 下拉浮层相关配置(应用当前下拉菜单，优先级高于上层的配置） | 参考官方dropdown API | - | - |
| moreIcon | 有`children`情况下，配置右侧的图标，返回null则不显示 | ReactNode | - | - |
| labelStyle | 给文本(包括图标)单独配置样式 | Object | 否 |
| labelClassname  | 给文本(包括图标)单独配置样式类 | String | 否 |
| 其他 | [参考官网](https://ant.design/components/button-cn/#API) | Boolean | 否 |

> 关于 confirmConfig
>> `title` 类型可为string,或Function，【在表格列中参数为(text,record,index,other)】，优先级高于`confirmText`
>
>> `onConfirm`,气泡确认框“确定按钮事件”，，【在表格列中参数为(text,record,index,other)】，优先级高于`fn`
>
>> `onCancel`,气泡确认框“取消按钮事件”，，【在表格列中参数为(text,record,index,other)】
>


### codes API

| 参数字段      | 说明  |   类型   |必选项| 参考值|
|----------|------|-------------|------|------|
| name |  名称 | String | 是 |- |
| code | 指定按钮权限code | String |  是 | -|
| icon | 图标名称 | String |  是 |-|


#### icon API
**1、@value `{String}`当表示为String,单个名称字符串 如'plus' ==> 结果渲染为'speci-plus'**
* 说明1.当数据里面包含','则将区分两个参数,第一个参数代表图标类名前缀，第二个参数代表当前图标类名 ‘speci,plus’ ==> 结果SVG渲染名称为 'speci-plus'
* 说明2.当数据里面包含','第一个参数为空或者为noPrefix，结构渲染为最后一个作为图标的名称，即',plus'或'noPrefix,plus' ==》 结果SVG渲染名称为 'plus'

**2、 @value`{Array}`当表示为Array时，必须包含两个参数['speci','plus']**
* 说明1.第一个参数代表图标类名前缀，第二个参数代表当前图标类名 => 结果渲染'speci-plus'
* 说明2.如果第一个参数为'noPrefix'或空，则将不显示前缀值,即：['', 'spec-plus]或 ['noPrefix', 'spec-plus] => 结果渲染'speci-plus'

**3、@value `{ReactNode}` 当表示为ReactNode时，则直接渲染**

**4、@value `{null}` 当为null时，不渲染图标**