---
group:
  title: 页面布局
  order: 1
title: SubfieldContent
order: 1
toc: content
---

# SubfieldContent 带左侧树结构页面容器


## 代码演示
<code title="基础用法" desc="配置左侧栏可拖动"  src="../../src/StandardContent/demos/subfield.tsx" compact="true" ></code>


<code title="带底部栏" desc="`contentDisplay`内容区域展示`block`还是`flex`"  src="../../src/StandardContent/demos/subfieldFooter.tsx" compact="true" ></code>

<code title="表格" desc="带左侧栏"  src="../../src/StandardContent/demos/subfieldTable.tsx" compact="true" ></code>

## API
| 参数      | 说明                                  | 类型         | 默认值 |
|----------|-------------------------------------|-------------|-------|
| children | 内容结构                                | `ReactNode` | - |
| style | 扩展样式                                | `Object` | - |
| className | 扩展样式类                               | `String` | - |
| leftSiderNode | 左侧内容区域结构                            | `ReactNode` |- |
| leftSiderWidth | 左侧内容区域结构宽度设置                        | `Number` | `180` |
| leftSiderClassName | 左侧内容区域结构类名                          | `String` |  |
| leftSiderNoPadding（`v4.1.22`) | 左侧内容区域无边距                           | `Boolean` | `false` |
| leftSiderStyle（`v4.1.22`) | 左侧内容区域样式                            | `Object` |  |
| leftSiderHide`v4.1.27` | 隐藏左侧内容                              | `Boolean` | `false` |
| leftSiderLoading`v4.1.29` | 只针对左侧区域的loading状态                   |  `boolean`|  |
| leftSiderDragDirection | 左侧内容区域可拉动方向配置                       | `Array` | `['right']` |
| leftSiderMoveMaxWidth | 左侧内容区域设置可拉动最大宽度                     | `Number` | - | 
| leftSiderMoveMaxHeight | 左侧内容区域设置可拉动最大高度                     | `Number` | - |
| loading | 内容框显示“loading"状态                    | Boolean | `false` |
| ~~loadingTip~~`v6.0.0弃用` | 内容框显示“loading"状态时显示的文本              | String    | - |
| loadingArea | loading区域范围，默认只在右侧，如包含左侧，则可配置`full` | `String` | - |
| loadingConfig | 内容区域`<Spin>`自定义扩展配置，用法参考官方                      | `Object` | - |
| 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 | 是否固定在底部 | Boolean | `false`|