syncfusion-react-splitter

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion React Splitter

实现Syncfusion React Splitter

The Splitter component creates flexible, resizable panel layouts with advanced configuration options. This skill guides you through installation, layout patterns, customization, and accessibility features.

Splitter组件可创建灵活的可调整大小面板布局，支持高级配置选项。本教程将指导你完成安装、布局模式、自定义以及可访问性功能的相关操作。

When to Use This Skill

何时使用本教程

Use the Splitter component when you need to:

Create flexible layouts with multiple resizable panels
Build split-screen interfaces (code editors, dashboards, file explorers)
Allow users to adjust pane sizes dynamically
Display collapsible panes with expand/collapse functionality
Support different layout orientations (horizontal, vertical, nested)
Implement responsive multi-panel layouts
Add custom content types (HTML, components, selectors) to panes

当你需要实现以下需求时可使用Splitter组件：

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

Component Overview

组件概述

SplitterComponent provides a container for multiple panes that users can resize by dragging separators. Each pane is defined with

<PaneDirective>

within

<PanesDirective>

Key Features:

Multiple layout orientations (horizontal, vertical, nested)
Dynamic pane resizing with constraints
Expand/collapse pane functionality
Multiple content types (HTML, components, CSS selectors)
Events for resize, expand, collapse operations
Add/remove panes dynamically at runtime
Accessibility and RTL support
Theme customization

Installation:

npm install @syncfusion/ej2-react-layouts --save

SplitterComponent 为多个窗格提供容器，用户可通过拖动分隔线调整窗格大小。每个窗格通过

<PanesDirective>

内的

<PaneDirective>

定义。

核心功能：

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

安装命令：

npm install @syncfusion/ej2-react-layouts --save

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Installation and package setup
CSS imports and theme configuration
Basic Splitter initialization with PanesDirective
First working example
Import statements and dependencies

📄 阅读： references/getting-started.md

安装与包设置
CSS导入与主题配置
使用PanesDirective完成Splitter基础初始化
第一个可运行示例
导入语句与依赖说明

API Reference: Properties and Configuration

API参考：属性与配置

📄 Read: references/properties-and-configuration.md

Complete SplitterComponent properties (orientation, height, width, separatorSize, etc.)
All PaneDirective properties (size, min, max, collapsed, collapsible, resizable, content, cssClass)
enablePersistence for state persistence
enableHtmlSanitizer for security
Common configuration patterns and examples

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

完整的SplitterComponent属性（方向、高度、宽度、分隔线尺寸等）
所有PaneDirective属性（尺寸、最小值、最大值、折叠状态、是否可折叠、是否可调整大小、内容、CSS类）
enablePersistence实现状态持久化
enableHtmlSanitizer保障安全
常见配置模式与示例

API Reference: Methods

API参考：方法

📄 Read: references/methods-reference.md

addPane() - Dynamically add new panes with PanePropertiesModel
removePane() - Remove panes by index
collapse() - Programmatically collapse panes
expand() - Programmatically expand panes
destroy() - Component cleanup and resource release
Real-world examples with working code

📄 阅读： references/methods-reference.md

addPane() - 通过PanePropertiesModel动态添加新窗格
removePane() - 按索引移除窗格
collapse() - 以编程方式折叠窗格
expand() - 以编程方式展开窗格
destroy() - 组件清理与资源释放
附带可运行代码的实际场景示例

API Reference: Events

API参考：事件

📄 Read: references/events-reference.md

created - Component initialization
beforeCollapse / collapsed - Collapse events with cancellation
beforeExpand / expanded - Expand events with data loading
resizeStart / resizing / resizeStop - Resize lifecycle
Event handling patterns and state management

📄 阅读： references/events-reference.md

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

Pane Layout Configuration

窗格布局配置

📄 Read: references/pane-layout-configuration.md

Horizontal and vertical layouts
Multiple panes and nested splitters
Pane properties and configuration
Layout patterns for common use cases

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

水平与垂直布局
多窗格与嵌套Splitter
窗格属性与配置
常见场景的布局模式

Pane Sizing and Separation

窗格尺寸与分隔线设置

📄 Read: references/pane-sizing-and-separation.md

Fixed pane sizing
Percentage-based sizing
Min and max size constraints
Separator styling and customization
Dynamic size adjustments

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

固定窗格尺寸
百分比尺寸
最小与最大尺寸约束
分隔线样式与自定义
动态尺寸调整

Expand and Collapse Functionality

展开与折叠功能

📄 Read: references/expand-collapse-functionality.md

Collapsed state initialization
Button integration for expand/collapse
User-driven vs programmatic collapse
Event handling patterns

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

折叠状态初始化
展开/折叠按钮集成
用户触发与编程式折叠
事件处理模式

Resize Behavior

调整大小行为

📄 Read: references/resize-behavior.md

Resize events and lifecycle
Preventing resize on specific panes
Dynamic resize configuration
Resize constraints and validation
Event data and handling

📄 阅读： references/resize-behavior.md

调整大小事件与生命周期
禁止特定窗格调整大小
动态调整大小配置
调整大小约束与校验
事件数据与处理

Pane Content and Styling

窗格内容与样式

📄 Read: references/pane-content-and-styling.md

HTML content in panes
React component content in panes
CSS selector-based content
Pane template usage
Custom styling and classes

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

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

Accessibility and Globalization

可访问性与全球化

📄 Read: references/accessibility-and-globalization.md

WCAG compliance and keyboard navigation
ARIA attributes and screen reader support
RTL (Right-to-Left) support
Internationalization and locale
Focus management and accessibility patterns

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

WCAG合规与键盘导航
ARIA属性与屏幕阅读器支持
RTL（从右到左）支持
国际化与本地化
焦点管理与可访问性模式

Style Customization

样式自定义

📄 Read: references/style-customization.md

CSS customization and custom classes
Theme variables and CSS imports
Gripper and separator styling
Responsive design patterns
Dark mode and theme switching

📄 阅读： references/style-customization.md

CSS自定义与自定义类
主题变量与CSS导入
拖动柄与分隔线样式
响应式设计模式
深色模式与主题切换

Quick Start Example

快速入门示例

tsx

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;

tsx

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;

Common Patterns

常见模式

Two-Column Layout

双列布局

tsx

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

tsx

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

Vertical Split with Collapse

带折叠功能的垂直分割

tsx

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

tsx

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

Three-Panel Dashboard

三面板仪表盘

tsx

<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>

tsx

<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>

Nested Splitters

嵌套Splitter

Combine horizontal and vertical splitters for complex layouts like code editors with file explorer, editor, and console panels.

组合水平与垂直Splitter即可实现复杂布局，例如包含文件资源管理器、编辑器、控制台面板的代码编辑器。

Key Props

核心属性

Prop	Type	Description	When to Use
`orientation`	'Horizontal' \| 'Vertical'	Layout direction	When configuring panel direction
`size`	string (PaneDirective)	Pane width/height (px, %)	When setting pane dimensions
`min`	string (PaneDirective)	Minimum pane size	When preventing pane from shrinking too small
`max`	string (PaneDirective)	Maximum pane size	When limiting pane expansion
`collapsed`	boolean (PaneDirective)	Initial collapsed state	When panes should start hidden
`collapsible`	boolean (PaneDirective)	Allow user to collapse	When collapsing should be user-driven
`resizable`	boolean (PaneDirective)	Allow user to resize	When preventing manual resizing

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

Common Use Cases

常见使用场景

File Explorer + Editor: Left sidebar (fixed 250px) with collapsible file tree, main editor area with resizing

Dashboard: Top bar (fixed height), left sidebar (collapsible nav), main content, right details panel

Chat Interface: Left contact list (fixed width), chat area (resizable), right info panel

Code Editor: Left explorer (collapsible), center editor (main), bottom console (collapsible)

Email Client: Left folders (fixed), center list (resizable), right preview (resizable)

文件资源管理器+编辑器： 左侧边栏（固定250px）带可折叠文件树，主编辑区支持调整大小

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

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

代码编辑器： 左侧资源管理器（可折叠）、中间主编辑器、底部控制台（可折叠）

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