---
group:
  title: 页面布局
  order: 1
title: WrapperContent
order: 2
toc: content
---
# WrapperContent 通用页面容器

## 代码演示

<code title="页面应用" src="../../src/StandardContent/demos/wrapperPage.tsx" compact="true" ></code>


<code title="基础用法" src="../../src/StandardContent/demos/wrapper.tsx" compact="true" ></code>

<code title="配置底部扩展" src="../../src/StandardContent/demos/wrapperFooter.tsx" compact="true"></code>

<code title="light" src="../../src/StandardContent/demos/wrapperBlock.tsx" compact="true" ></code>


## API
| 参数                       | 说明                         | 类型        | 默认值 |
|--------------------------|----------------------------|-----------|-------|
| children                 | 内容结构                       | ReactNode | - |
| style                    | 扩展样式                       | Object    | - |
| className                | 扩展样式类                      | String    | - |
| noMargin                 | 内容区域不带上下边距                 | Boolean   |false |
| loading                  | 内容框显示“loading"状态           | Boolean   | false |
| ~~loadingTip~~`v6.0.0弃用` | 已弃用但兼容；请使用 loadingConfig.description     | String    | - |
| loadingConfig            | 内容区域`<Spin>`自定义扩展配置，用法参考官方 | Object    | - |
| light                    | 底部颜色值显示为白色                 | Boolean   | false |
| header                   | 配置标题与面包屑                   | Object    | [参考](#header-api) |
| footer`v4.1.27`          | 配置底部扩展结构                   | Object    | [参考](#footer-api) |


## header API

| 参数      | 说明                                      | 类型         | 默认值 |
|----------|------------------------------------------|-------------|-------|
| title | 标题，不显示配置为null | string、ReactNode | - |
| breadcrumb | 路径面包屑，不显示配置为null | Object | {items, itemRender}|
| extra | 与标题栏同一行右侧扩展内容 | ReactNode | - |
| prefix | 与标题栏同一行且在标题左侧的扩展内容 | ReactNode | - |
| goBack | 与标题栏同一行且在标题左侧扩展内容 | ReactNode | - |
| tabs | tabs相关配置 | `{items,size}` | - |



## footer API

| 参数      | 说明                                      | 类型         | 默认值 |
|----------|------------------------------------------|-------------|-------|
| layout | 底部自定义结构与按钮组排版方式 | String | 'vertica'、'horizontal'、'inline' |
| content | 自定义内容区 | ReactNode | - |
| contentAfter | 自定义内容区（如有配置buttonGroup,则显示在其下方或者之后） | ReactNode ||
| buttonGroup | 按钮组配 | Array | - |
| buttonGroupAlign | 按钮展示位置(layout='inline'时无效） | String | 'left'、'center'、'right' |
| buttonGroupConfig | 按钮组扩展配置 | Object | - |
| fixed | 是否固定在底部(配置固定的同时，header也会固定） | Boolean | `false`|



## 6.0.0 加载与下拉配置

```
<WrapperContent
  loading
  loadingConfig={{
    description: '加载中…',
    classNames: { root: 'page-loading' },
  }}
  footer={{
    buttonGroup: buttons,
    buttonGroupConfig: {
      dropdownConfig: {
        classNames: { root: 'footer-actions-popup' },
        styles: { root: { maxHeight: 320, overflowY: 'auto' } },
        destroyOnHidden: true,
      },
    },
  }}
>
  {children}
</WrapperContent>
```

`loadingConfig` 类型为 antd `SpinProps`，支持对象或函数形式的语义样式。`loadingTip`、`loadingConfig.tip`、`loadingConfig.wrapperClassName` 自 6.0.0 起弃用但仍兼容；分别改用 `loadingConfig.description`、`loadingConfig.description`、`loadingConfig.classNames.root`。

新 description 非 null/undefined 时优先（空字符串有效）；未配置时回退到旧文案。新旧根类名会合并，其他语义节点保留。开发环境按组件和字段仅提示一次，动态新增旧配置也会提示，生产环境不输出此类兼容警告。

底部按钮 Dropdown 的 `overlayClassName`、`overlayStyle`、`dropdownRender`、`destroyPopupOnHide` 分别替换为 `classNames.root`、`styles.root`、`popupRender`、`destroyOnHidden`。这里 root 是弹出层，和 Spin 的内容包装层不同。

SubfieldContent/StandardList 通用用法和内部弃用提示写法见[升级建议](/manage/upgrade-V5)。