syncfusion-react-splitter

Name: syncfusion-react-splitter
Author: syncfusion

github.com/syncfusion设计与 UI3661 次安装1 周前更新

代码仓库

关于 syncfusion-react-splitter

这项技能指导开发者实现 Syncfusion React Splitter，用于构建可配置、可调整大小的面板布局，并介绍尺寸、内容、事件和无障碍支持。

主要功能

01水平、垂直与嵌套布局
02带尺寸限制的面板调整
03面板展开与折叠
04动态添加和移除面板
05调整大小及面板生命周期事件
06无障碍与 RTL 支持

适用场景

01将文件浏览器与编辑器并排布局
02构建多面板仪表板
03创建可调整的聊天界面
04组织编辑器、浏览器与控制台面板

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-splitter

安装后在 Claude Code 中输入/syncfusion-react-splitter确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

accessibility-and-globalization.md

events-reference.md

expand-collapse-functionality.md

getting-started.md

methods-reference.md

pane-content-and-styling.md

pane-layout-configuration.md

pane-sizing-and-separation.md

properties-and-configuration.md

resize-behavior.md

style-customization.md

详细介绍

实现 Syncfusion React Splitter

Splitter 组件可创建灵活、可调整大小的面板布局，并提供高级配置选项。本技能将指导你完成安装、布局模式、自定义和无障碍功能。

何时使用此技能

在以下情况下使用 Splitter 组件：

创建包含多个可调整大小面板的灵活布局
构建分屏界面（代码编辑器、仪表板、文件浏览器）
允许用户动态调整窗格大小
显示支持展开和折叠功能的可折叠窗格
支持不同的布局方向（水平、垂直、嵌套）
实现响应式多面板布局
为窗格添加自定义内容类型（HTML、组件、选择器）

组件概述

SplitterComponent 提供一个容器，其中包含多个用户可通过拖动分隔条来调整大小的窗格。每个窗格都通过 <PaneDirective> 在 <PanesDirective> 中定义。

主要功能：

多种布局方向（水平、垂直、嵌套）
支持约束条件的动态窗格大小调整
窗格展开/折叠功能
多种内容类型（HTML、组件、CSS 选择器）
支持调整大小、展开和折叠操作的事件
在运行时动态添加/移除窗格
支持无障碍功能和 RTL
主题自定义

安装： npm install @syncfusion/ej2-react-layouts --save

文档和导航指南

入门

📄 阅读： references/getting-started.md

安装和包设置
CSS 导入和主题配置
使用 PanesDirective 初始化基本 Splitter
第一个可运行示例
导入语句和依赖项

API 参考：属性和配置

📄 阅读： references/properties-and-configuration.md

SplitterComponent 的完整属性（orientation、height、width、separatorSize 等）
所有 PaneDirective 属性（size、min、max、collapsed、collapsible、resizable、content、cssClass）
使用 enablePersistence 持久化状态
使用 enableHtmlSanitizer 确保安全
常见配置模式和示例

API 参考：方法

📄 阅读： references/methods-reference.md

addPane() - 使用 PanePropertiesModel 动态添加新窗格
removePane() - 按索引移除窗格
collapse() - 以编程方式折叠窗格
expand() - 以编程方式展开窗格
destroy() - 清理组件并释放资源
包含可运行代码的真实示例

API 参考：事件

📄 阅读： references/events-reference.md

created - 组件初始化
beforeCollapse / collapsed - 支持取消的折叠事件
beforeExpand / expanded - 支持加载数据的展开事件
resizeStart / resizing / resizeStop - 调整大小的生命周期
事件处理模式和状态管理

窗格布局配置

📄 阅读： references/pane-layout-configuration.md

水平和垂直布局
多个窗格和嵌套 Splitter
窗格属性和配置
常见用例的布局模式

窗格大小和分隔条

📄 阅读： references/pane-sizing-and-separation.md

固定窗格大小
基于百分比的大小设置
最小和最大尺寸约束
分隔条样式和自定义
动态调整大小

展开和折叠功能

📄 阅读： references/expand-collapse-functionality.md

初始化时设置折叠状态
集成展开/折叠按钮
用户操作与以编程方式折叠
事件处理模式

调整大小行为

📄 阅读： references/resize-behavior.md

调整大小事件和生命周期
阻止特定窗格调整大小
动态调整大小配置
调整大小限制和验证
事件数据和处理

窗格内容和样式

📄 阅读： references/pane-content-and-styling.md

窗格中的 HTML 内容
窗格中的 React 组件内容
基于 CSS 选择器的内容
窗格模板的使用
自定义样式和类

无障碍访问和全球化

📄 阅读： references/accessibility-and-globalization.md

WCAG 合规性和键盘导航
ARIA 属性和屏幕阅读器支持
RTL（从右到左）支持
国际化和区域设置
焦点管理和无障碍访问模式

样式自定义

📄 阅读： references/style-customization.md

CSS 自定义和自定义类
主题变量和 CSS 导入
抓手和分隔线样式
响应式设计模式
深色模式和主题切换

快速入门示例

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;

常见模式

双列布局

<SplitterComponent orientation='Horizontal'>
  <PanesDirective>
    <PaneDirective size='25%'><div>Left</div></PaneDirective>
    <PaneDirective size='75%'><div>Main Content</div></PaneDirective>
  </PanesDirective>
</SplitterComponent>

可折叠的垂直分割

<SplitterComponent orientation='Vertical'>
  <PanesDirective>
    <PaneDirective size='50%' collapsed={true}><div>Top</div></PaneDirective>
    <PaneDirective size='50%'><div>Bottom</div></PaneDirective>
  </PanesDirective>
</SplitterComponent>

三面板仪表板

<SplitterComponent orientation='Horizontal'>
  <PanesDirective>
    <PaneDirective size='20%'><div>Sidebar</div></PaneDirective>
    <PaneDirective size='60%'><div>Main Content</div></PaneDirective>
    <PaneDirective size='20%'><div>Right Panel</div></PaneDirective>
  </PanesDirective>
</SplitterComponent>

嵌套分割器

组合水平和垂直分割器，构建复杂布局，例如包含文件浏览器、编辑器和控制台面板的代码编辑器。

关键属性

属性	类型	描述	使用场景
`orientation`	'Horizontal' \| 'Vertical'	布局方向	配置面板方向时
`size`	string (PaneDirective)	窗格宽度/高度（px、%）	设置窗格尺寸时
`min`	string (PaneDirective)	窗格最小尺寸	防止窗格缩得过小时
`max`	string (PaneDirective)	窗格最大尺寸	限制窗格扩展时
`collapsed`	boolean (PaneDirective)	初始折叠状态	窗格应以隐藏状态启动时
`collapsible`	boolean (PaneDirective)	允许用户折叠	需要由用户控制折叠时
`resizable`	boolean (PaneDirective)	允许用户调整大小	禁止手动调整大小时

常见用例

文件浏览器 + 编辑器： 左侧边栏（固定 250px），包含可折叠文件树；主编辑区域可调整大小

仪表板： 顶部栏（固定高度）、左侧边栏（可折叠导航）、主内容区、右侧详情面板

聊天界面： 左侧联系人列表（固定宽度）、聊天区域（可调整大小）、右侧信息面板

代码编辑器： 左侧浏览器（可折叠）、中央编辑器（主体）、底部控制台（可折叠）

电子邮件客户端： 左侧文件夹（固定）、中央列表（可调整大小）、右侧预览（可调整大小）

支持 Markdown

登录后评论