Syncfusion React Splitter 是 Syncfusion 提供的 React UI 组件，用于实现灵活、可调整大小的面板布局。该技能文档围绕安装、布局模式、自定义与无障碍特性展开，帮助开发者在 React 应用中集成 Splitter 组件。
一、用途与适用场景 当需要创建包含多个可调整大小面板的灵活布局、构建分屏界面（如代码编辑器、仪表盘、文件浏览器）、允许用户动态调整面板尺寸、显示可折叠面板、支持水平/垂直/嵌套等不同布局方向、实现响应式多面板布局，或向面板添加自定义内容类型（HTML、组件、选择器）时，可使用该组件。
二、主要能力 SplitterComponent 提供可容纳多个面板的容器，用户通过拖动分隔条调整面板大小。每个面板在 PanesDirective 内通过 PaneDirective 定义。关键特性包括：多种布局方向（水平、垂直、嵌套）；带约束的动态面板调整大小；面板展开/折叠功能；多种内容类型（HTML、组件、CSS 选择器）；用于调整大小、展开、折叠操作的事件；运行时动态添加/移除面板；无障碍与 RTL 支持；主题定制。
三、安装与使用方式 安装命令：npm install @syncfusion/ej2-react-layouts --save。 基本用法示例： import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts'; import * as React from "react"; import './App.css';
function App() { return ( <div className='App'> <SplitterComponent> <PanesDirective> <PaneDirective size='200px'> <div>Left Panel</div> </PaneDirective> <PaneDirective size='300px'> <div>Right Panel</div> </PaneDirective> </PanesDirective> </SplitterComponent> </div> ); }
export default App;
常见模式包括：两列布局（orientation='Horizontal'，面板尺寸 25%/75%）；带折叠的垂直分割（orientation='Vertical'，collapsed={true}）；三面板仪表盘（20%/60%/20%）；嵌套 Splitter（组合水平与垂直分割，用于代码编辑器等复杂布局）。
四、关键属性 orientation：'Horizontal' | 'Vertical'，布局方向；size：字符串（PaneDirective），面板宽/高（px、%）；min：字符串（PaneDirective），面板最小尺寸；max：字符串（PaneDirective），面板最大尺寸；collapsed：布尔（PaneDirective），初始折叠状态；collapsible：布尔（PaneDirective），是否允许用户折叠；resizable：布尔（PaneDirective），是否允许调整大小。
五、API 参考 属性与配置：SplitterComponent 属性（orientation、height、width、separatorSize 等）；PaneDirective 属性（size、min、max、collapsed、collapsible、resizable、content、cssClass）；enablePersistence 状态持久化；enableHtmlSanitizer 安全净化。 方法：addPane() 动态添加面板（PanePropertiesModel）；removePane() 按索引移除面板；collapse() 以编程方式折叠面板；expand() 以编程方式展开面板；destroy() 组件清理与资源释放。 事件：created 组件初始化；beforeCollapse / collapsed 折叠事件（可取消）；beforeExpand / expanded 展开事件（可加载数据）；resizeStart / resizing / resizeStop 调整大小生命周期。
六、文档导航主题 入门（安装与包设置、CSS 导入与主题配置、基本初始化、首个示例、导入语句与依赖）；属性与配置；方法参考；事件参考；面板布局配置（水平/垂直布局、多面板与嵌套、布局模式）；面板尺寸与分隔（固定尺寸、百分比、最小/最大约束、分隔条样式、动态调整）；展开与折叠（初始折叠状态、按钮集成、用户驱动与编程方式、事件处理）；调整大小行为（事件与生命周期、禁止特定面板调整、动态配置、约束与验证）；面板内容与样式（HTML、React 组件、CSS 选择器、模板、自定义样式）；无障碍与全球化（WCAG 与键盘导航、ARIA 与屏幕阅读器、RTL、国际化与区域、焦点管理）；样式定制（CSS 与自定义类、主题变量与 CSS 导入、手柄与分隔条样式、响应式、暗色模式与主题切换）。
七、常见用例 文件浏览器 + 编辑器：左侧边栏（固定 250px）带可折叠文件树，主编辑区可调整大小；仪表盘：顶栏（固定高度）、左侧边栏（可折叠导航）、主内容、右侧详情面板；聊天界面：左侧联系人列表（固定宽度）、聊天区（可调整）、右侧信息面板；代码编辑器：左侧资源管理器（可折叠）、中间编辑器（主）、底部控制台（可折叠）；邮件客户端：左侧文件夹（固定）、中间列表（可调整）、右侧预览（可调整）。
八、限制 资料未提供该组件的收费、价格、平台兼容性、性能指标等具体信息，暂未提供。