syncfusion-javascript-splitter

用途

Syncfusion TypeScript Splitter 控件用于在 Web 应用中构建复杂的、响应式的多窗格布局。它将容器划分为多个由可调整大小的分隔条隔开的窗格，适合需要可调节区域划分的界面场景，如仪表盘、代码编辑器、管理后台等。

主要能力

布局方向：支持水平（默认）和垂直两种方向，通过 orientation 属性设置。
窗格尺寸与约束：窗格尺寸可用像素（如 '200px'）或百分比（如 '30%'）指定，并支持 min/max 约束。
折叠与展开：窗格可设置 collapsible: true 启用折叠/展开图标，也可指定初始 collapsed 状态。
嵌套布局：支持嵌套分隔器，实现复杂的多级窗格层次结构（如代码编辑器布局）。
事件处理：提供 created、beforeExpand、expanded、beforeCollapse、collapsed、resizeStart、resizing、resizeStop、beforeSanitizeHtml 等事件，其中 beforeExpand/beforeCollapse 可通过 args.cancel 取消操作。
动态窗格管理：可通过 addPane() 和 removePane() 方法动态增删窗格。
样式定制：可通过 CSS 定制分隔条（.e-split-bar）、调整手柄（.e-resize-handler）、箭头（.e-navigate-arrow）等。
国际化：支持 RTL 从右到左布局（enableRtl），适用于阿拉伯语、希伯来语等。
状态持久化：enablePersistence 可将窗格状态保存到 localStorage，跨页面刷新保留。
HTML 净化：enableHtmlSanitizer 默认开启，防止 XSS。

使用方式

安装依赖包 @syncfusion/ej2-layouts（npm 安装），并导入 CSS 主题（资料中提及 fluent2.css）。
从 '@syncfusion/ej2-layouts' 导入 Splitter，通过 new Splitter({...}) 创建实例，配置 height、width、paneSettings 等属性。
使用 appendTo('#splitter') 将组件挂载到 DOM 中的容器元素。
HTML 中提供容器 div 及对应数量的子 div。

示例代码（来自资料）：

import { Splitter } from '@syncfusion/ej2-layouts';

let splitObj: Splitter = new Splitter({
    height: '250px',
    width: '600px',
    paneSettings: [
        { size: '200px', content: 'Pane 1' },
        { size: '200px', content: 'Pane 2' },
        { size: '200px', content: 'Pane 3' }
    ]
});

splitObj.appendTo('#splitter');

<div id="splitter">
    <div></div>
    <div></div>
    <div></div>
</div>

资料中还提供了多种常见模式示例，包括带 min/max 的响应式窗格、可折叠窗格、垂直拆分、嵌套分隔器、事件拦截（beforeCollapse 中设置 args.cancel）、动态增删窗格、程序化 expand/collapse、跟踪 resize 事件、持久化状态以及 RTL 支持。

主要属性参考

分隔器属性：height（默认 '100%'）、width（默认 '100%'）、orientation（默认 'Horizontal'）、paneSettings（默认 []）、separatorSize（默认 1）、cssClass、enableRtl（默认 false）、enabled（默认 true）、enablePersistence（默认 false）、enableReversePanes（默认 false）、enableHtmlSanitizer（默认 true）、locale（默认 'en-US'）。

窗格属性（paneSettings 项）：size（像素或百分比）、min、max、collapsible（默认 false）、collapsed（默认 false）、resizable（默认 true）、content（字符串或 HTMLElement）、cssClass。

主要方法

addPane(paneProperties, index)、removePane(index)、expand(index)、collapse(index)、refresh()、destroy()、getRootElement()、dataBind()、appendTo(selector?)、addEventListener(eventName, handler)、removeEventListener(eventName, handler)、Inject(moduleList)。

适用场景

仪表盘布局：可折叠侧边栏 + 自适应内容区。
IDE/代码编辑器：文件浏览器、代码编辑区、控制台等多窗格嵌套布局。
响应式管理后台：可折叠区块，配合 min/max 约束实现移动端友好的调整。
多文档界面（MDI）：水平与嵌套垂直拆分以堆叠/排列多个文档。

限制

资料未提供价格、许可、平台兼容性或性能方面的具体说明，此类信息暂未提供。