---
group:
  title: 通用组件
  order: 2
title: StandardPanel
order: 6
toc: content
---
#  StandardPanel 通用面板

## 代码演示

###  基本使用
可配置高度height，限制内容面板内容区展示
<code desc="" src="../../src/StandardPanel/demos/basic.tsx"></code>

###  按钮组用法
配置buttonConfig
<code  src="../../src/StandardPanel/demos/buttons.tsx"></code>

###  类别组用法
配置cateConfig
<code  src="../../src/StandardPanel/demos/cates.tsx"></code>

###  标签组用法
配置badges
<code src="../../src/StandardPanel/demos/badges.tsx"></code>

##  API
| 参数      | 说明                                      | 类型         | 参考值 |
|----------|------------------------------------------|-------------|-------|
| title | 标题 | `String\ReactNode\object `|object对应的值`{content: 'xx',label: 'xxx'}` |
| titleMark`v4.1.23` | 标题标记 | `String、ReactNode `|参考[standard-title:mark](/components/standard-title) |
| titleExtra`v4.1.23` | 标题栏右侧自定义结构 | `ReactNode`||
| type | 展示类型,可配置带边框或底色类型 |String| reverse(标题带底色)/border(带边框线) |
| height | 面板高度 | Boolean | - |
| className | 容器自定义样式类 | string|- |
| style | 容器自定义样式 | Object|- |
| bodyStyle | 配置body样式 |Object|- |
| buttonGroup | 显示在标题栏按钮组 |  Array|参考  |
| buttonGroupConfig | 显示在标题栏按钮组配置项 |  Object|参考[button-group](/components/button-group#api)  |
| buttonConfig | 显示在标题栏右侧按钮组配置（切换按钮组） |  Object|参考  [buttonConfig) 参数](#buttonconfig-api)|
| cateConfig | 显示在标题栏右侧类别组配置 |  Object| 参考  [buttonConfig) 参数](#buttonconfig-api)|
| badges | 显示于标题栏中间位置的标签组 |Array|参考  [badges) 参数](#badges-api) |
| postfix（`v4.1.23弃用`） | 标题栏右侧自定义结构 |String/ReactNode|- |
| codes |  ||- |
| permissionCodes |  `buttonGroup`按钮组权限||- |


### buttonConfig API
| 参数字段      | 说明  |   类型   |必选项|
|----------|------|-------------|------|
| activeKey | 设置默认选中按钮/类别 | String | 是 |
| list | 按钮组列表值 | Array(格式：[{ value: '1', label: '年'}]) | 否 |
| onChange | 按钮点击事件 | Function(key, checkedData) | 否 |
| size | 按钮显示大小 | String（`small``middle``large`） | 否 |

### badges API
| 参数字段      | 说明  |   类型   |必选项|
|----------|------|-------------|------|
| value | key值 | String | 是 |
| label | 显示文本 | String | 是 |
| color | 颜色值 | String | 否 |