---
group:
    title: 页面布局
    order: 1
title: SplitterLayout
order: 6
toc: content
---
# SplitterLayout 分割布局
> 用于需要分割布局

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

## API
| 参数      | 说明                                      | 类型         | 默认值 |
|----------|------------------------------------------|-------------|-------|
| children | 内容结构(只能两个，多余不显示，保证左右分割) | ReactNode | - |
| containerStyle | 容器扩展样式 | Object | - |
| customClassName | 容器扩展样式类 | String | - |
| partClassNames | 左右部分扩展样式类 | Array | - |
| partStyles | 左右部分扩展样式 | Array | - |
| splitterStyle | 分隔条扩展样式 | Object | - |
| splitterClassName | 分隔条扩展样式类 | String | - |
| vertical | 垂直方向排列(高度默认150，可通过样式调整) | Boolean | false |
| percentage | 是否以百分比计算宽度或高度 | Boolean | false |
| primaryIndex | 主要部分的序号(1表示第二部分为主) | Number | - |
| primaryMinSize | 主要部分最小宽度或高度 | Number | - |
| primaryInitialSize | 主要部分初始宽度或高度 | Number | - |
| secondaryInitialSize | 其余部分初始宽度或高度 | Number | - |
| secondaryMinSize | 其余部分最小宽度或高度 | Number | - |
| onDragStart | 开始移动事件 | Function | - |
| onDragEnd | 结束移动事件 | Function | - |
| onSecondaryPaneSizeChange | 其余部分移动改变尺寸事件 | Function | - |