syncfusion-blazor-splitter

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Blazor Splitter

实现Syncfusion Blazor Splitter

The Syncfusion Blazor Splitter component is a layout-based container that enables you to split a container area into resizable and collapsible panes. Use this skill when you need to create complex layouts with multiple content areas that users can adjust.

Syncfusion Blazor Splitter组件是一个基于布局的容器，可将容器区域划分为可调整大小和可折叠的窗格。当你需要创建包含多个可由用户调整的内容区域的复杂布局时，可以使用该组件。

When to Use This Skill

适用场景

Use this skill when you need to:

Create split layouts — Divide your UI into multiple panes (2, 3, or more) that users can resize
Handle pane configurations — Control pane sizing, minimum/maximum constraints, visibility, and collapsibility
Manage user interactions — Respond to resize events, collapse/expand actions, and state changes
Build complex interfaces — Create code editor layouts, dashboard panels, or multi-section dashboards
Persist pane state — Save and restore pane sizes and collapse states across page refreshes
Apply custom styling — Customize split bars, resize handles, and overall component appearance

在以下场景中使用该技能：

创建拆分布局 — 将UI划分为多个（2个、3个或更多）用户可调整大小的窗格
处理窗格配置 — 控制窗格尺寸、最小/最大约束、可见性和可折叠性
管理用户交互 — 响应调整大小事件、折叠/展开操作以及状态变更
构建复杂界面 — 创建代码编辑器布局、仪表板面板或多区域仪表板
持久化窗格状态 — 在页面刷新时保存和恢复窗格尺寸与折叠状态
应用自定义样式 — 自定义拆分栏、调整大小手柄以及组件整体外观

Component Overview

组件概述

The Splitter divides container space into independent panes using flexible layout:

Default: Horizontal orientation with vertical separators (left-to-right split)
Vertical mode: Vertical orientation with horizontal separators (top-to-bottom split)
Nested splitters: Support for complex layouts by nesting splitters within panes
Resizable: Users drag separators to adjust pane sizes in real-time
Collapsible: Optional collapse/expand buttons to hide panes and recover space
Persistent: Built-in state persistence to localStorage for user preferences

Splitter通过灵活布局将容器空间划分为独立窗格：

默认模式：水平方向，带有垂直分隔符（从左到右拆分）
垂直模式：垂直方向，带有水平分隔符（从上到下拆分）
嵌套拆分器：支持在窗格内嵌套拆分器以实现复杂布局
可调整大小：用户拖动分隔符可实时调整窗格尺寸
可折叠：可选的折叠/展开按钮，用于隐藏窗格以回收空间
持久化：内置状态持久化到localStorage，保存用户偏好设置

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation and NuGet package setup
WebAssembly vs Blazor Web App configuration
Namespace imports and service registration
Stylesheet and script resources
Basic horizontal and vertical splitter implementation
First render and initialization

📄 阅读： references/getting-started.md

安装与NuGet包设置
WebAssembly与Blazor Web应用配置
命名空间导入与服务注册
样式表与脚本资源
基础水平和垂直拆分器实现
首次渲染与初始化

Split Panes and Layouts

拆分窗格与布局

📄 Read: references/split-panes.md

Horizontal layout (default orientation)
Vertical layout (Orientation.Vertical)
Multiple panes configuration
Separator customization (SeparatorSize)
Nested splitter patterns
Flex-based auto-sizing behavior
Add and remove panes dynamically (AddPaneAsync, RemovePaneAsync)

📄 阅读： references/split-panes.md

水平布局（默认方向）
垂直布局（Orientation.Vertical）
多窗格配置
分隔符自定义（SeparatorSize）
嵌套拆分器模式
基于Flex的自动尺寸行为
动态添加和移除窗格（AddPaneAsync、RemovePaneAsync）

Pane Configuration and Settings

窗格配置与设置

📄 Read: references/pane-configuration.md

Pane sizing (fixed pixels, percentages, auto)
Min/Max size constraints
Visibility control (show/hide panes)
Collapsible panes with toggle buttons
Content templates and plain text
Integrating other Blazor components

📄 阅读： references/pane-configuration.md

窗格尺寸（固定像素、百分比、自动）
最小/最大尺寸约束
可见性控制（显示/隐藏窗格）
带切换按钮的可折叠窗格
内容模板与纯文本
集成其他Blazor组件

Events and Interactions

事件与交互

📄 Read: references/events-and-interactions.md

Created event lifecycle
OnResizeStart, Resizing, OnResizeStop events
OnCollapse, OnExpand event handlers
Collapsed, Expanded completion events
Event args and callback structures
Common event handling patterns

📄 阅读： references/events-and-interactions.md

Created事件生命周期
OnResizeStart、Resizing、OnResizeStop事件
OnCollapse、OnExpand事件处理程序
Collapsed、Expanded完成事件
事件参数与回调结构
常见事件处理模式

Resizing, Expand, and Collapse

调整大小、展开与折叠

📄 Read: references/resizing-and-expand-collapse.md

Resizing behavior and gripper element
Prevent resizing (Resizable property)
Min/Max size validation during resize
Enable/disable collapsible panes
Programmatic expand/collapse methods
Initial collapsed state configuration
Customize resize icons and cursors
Separator template customization (custom HTML templates)

📄 阅读： references/resizing-and-expand-collapse.md

调整大小行为与抓手元素
禁止调整大小（Resizable属性）
调整大小时的最小/最大尺寸验证
启用/禁用可折叠窗格
程序化展开/折叠方法
初始折叠状态配置
自定义调整大小图标与光标
分隔符模板自定义（自定义HTML模板）

Styling and Theming

样式与主题

📄 Read: references/styling-and-theming.md

Customize split bar appearance
Style resize handles
Customize resize arrows
Hide/show resize handlers
CSS class selectors for panes
Theme integration (Bootstrap, Fluent, etc.)

📄 阅读： references/styling-and-theming.md

自定义拆分栏外观
设置调整大小手柄样式
自定义调整大小箭头
显示/隐藏调整大小手柄
窗格的CSS类选择器
主题集成（Bootstrap、Fluent等）

State Management and Persistence

状态管理与持久化

📄 Read: references/state-management.md

Enable state persistence (EnablePersistence)
Two-way data binding (@bind-Collapsed, @bind-Size)
Save/restore pane sizes and collapsed states
LocalStorage integration
Binding pane properties to component state

📄 阅读： references/state-management.md

启用状态持久化（EnablePersistence）
双向数据绑定（@bind-Collapsed、@bind-Size）
保存/恢复窗格尺寸与折叠状态
LocalStorage集成
将窗格属性绑定到组件状态

Advanced Scenarios and Layouts

高级场景与布局

📄 Read: references/advanced-scenarios.md

Code editor style layout (nested horizontal + vertical)
Outlook style layout with TreeView and ListView
Dashboard and multi-panel layouts
Performance optimization for complex layouts
Nested splitters best practices
Common troubleshooting and edge cases

📄 阅读： references/advanced-scenarios.md

代码编辑器样式布局（嵌套水平+垂直）
带有TreeView和ListView的Outlook样式布局
仪表板与多面板布局
复杂布局的性能优化
嵌套拆分器最佳实践
常见问题排查与边缘情况

Complete API Reference

完整API参考

📄 Read: references/api-reference.md

All SfSplitter properties, methods, and events
SplitterPane property details
Event arguments and handlers
Complete code examples for each API
Content property vs ContentTemplate comparison
RTL, persistence, and advanced property usage

📄 阅读： references/api-reference.md

所有SfSplitter属性、方法与事件
SplitterPane属性详情
事件参数与处理程序
每个API的完整代码示例
Content属性与ContentTemplate对比
RTL、持久化与高级属性用法

Quick Start Example

快速入门示例

Horizontal Splitter with Two Panes

双窗格水平拆分器

csharp

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="240px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="300px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Left Pane</h3>
                    <p>Content here</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Right Pane</h3>
                    <p>Content here</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

csharp

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="240px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="300px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Left Pane</h3>
                    <p>Content here</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Right Pane</h3>
                    <p>Content here</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Vertical Splitter with Collapse Buttons

带折叠按钮的垂直拆分器

csharp

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%" Orientation="Orientation.Vertical">
    <SplitterPanes>
        <SplitterPane Size="100px" Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">Top Pane</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">Bottom Pane</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

csharp

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%" Orientation="Orientation.Vertical">
    <SplitterPanes>
        <SplitterPane Size="100px" Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">Top Pane</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">Bottom Pane</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Common Patterns

常见模式

Pattern 1: Responsive Three-Pane Layout

模式1：响应式三窗格布局

csharp

<SfSplitter Height="400px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="20%" Min="150px" Collapsible="true">
            <ContentTemplate><div>Sidebar</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="60%" Min="300px">
            <ContentTemplate><div>Main Content</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="20%" Min="150px" Collapsible="true">
            <ContentTemplate><div>Details Panel</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

When to use: Dashboard layouts, IDE-style interfaces, content management systems.

csharp

<SfSplitter Height="400px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="20%" Min="150px" Collapsible="true">
            <ContentTemplate><div>Sidebar</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="60%" Min="300px">
            <ContentTemplate><div>Main Content</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="20%" Min="150px" Collapsible="true">
            <ContentTemplate><div>Details Panel</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

适用场景：仪表板布局、IDE风格界面、内容管理系统。

Pattern 2: Nested Splitters (Code Editor Layout)

模式2：嵌套拆分器（代码编辑器布局）

csharp

<SfSplitter Height="400px" Orientation="Orientation.Vertical">
    <SplitterPanes>
        <SplitterPane Size="60%">
            <SfSplitter Height="100%">
                <SplitterPanes>
                    <SplitterPane Size="30%"><ContentTemplate>HTML</ContentTemplate></SplitterPane>
                    <SplitterPane Size="30%"><ContentTemplate>CSS</ContentTemplate></SplitterPane>
                    <SplitterPane Size="40%"><ContentTemplate>JS</ContentTemplate></SplitterPane>
                </SplitterPanes>
            </SfSplitter>
        </SplitterPane>
        <SplitterPane Size="40%"><ContentTemplate>Preview</ContentTemplate></SplitterPane>
    </SplitterPanes>
</SfSplitter>

When to use: Code editors, preview panes, complex dashboard layouts.

csharp

<SfSplitter Height="400px" Orientation="Orientation.Vertical">
    <SplitterPanes>
        <SplitterPane Size="60%">
            <SfSplitter Height="100%">
                <SplitterPanes>
                    <SplitterPane Size="30%"><ContentTemplate>HTML</ContentTemplate></SplitterPane>
                    <SplitterPane Size="30%"><ContentTemplate>CSS</ContentTemplate></SplitterPane>
                    <SplitterPane Size="40%"><ContentTemplate>JS</ContentTemplate></SplitterPane>
                </SplitterPanes>
            </SfSplitter>
        </SplitterPane>
        <SplitterPane Size="40%"><ContentTemplate>Preview</ContentTemplate></SplitterPane>
    </SplitterPanes>
</SfSplitter>

适用场景：代码编辑器、预览窗格、复杂仪表板布局。

Pattern 3: Collapsible Sidebar with State Binding

模式3：带状态绑定的可折叠侧边栏

csharp

<SfSplitter Height="300px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="250px" Min="50px" Collapsible="true" @bind-Collapsed="@sidebarCollapsed">
            <ContentTemplate><div>Navigation</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Main Area</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private bool sidebarCollapsed = false;
}

When to use: Applications needing dynamic sidebar toggles synchronized with UI state.

csharp

<SfSplitter Height="300px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="250px" Min="50px" Collapsible="true" @bind-Collapsed="@sidebarCollapsed">
            <ContentTemplate><div>Navigation</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Main Area</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private bool sidebarCollapsed = false;
}

适用场景：需要与UI状态同步的动态侧边栏切换的应用程序。

Key Props and Configuration

关键属性与配置

Property	Type	Description	Default
`Height`	string	Container height	Required
`Width`	string	Container width	100%
`Orientation`	Orientation	Horizontal or Vertical	Horizontal
`SeparatorSize`	int	Separator thickness in pixels	1
`EnablePersistence`	bool	Save state to localStorage	false
`Size`	string	Pane width/height (px or %)	Auto
`Min`	string	Minimum pane size	0
`Max`	string	Maximum pane size	Unlimited
`Resizable`	bool	Allow pane resizing	true
`Collapsible`	bool	Show collapse/expand buttons	false
`Visible`	bool	Show/hide pane	true
`Collapsed`	bool	Initial collapsed state	false

属性	类型	描述	默认值
`Height`	string	容器高度	必填
`Width`	string	容器宽度	100%
`Orientation`	Orientation	水平或垂直	Horizontal
`SeparatorSize`	int	分隔符厚度（像素）	1
`EnablePersistence`	bool	将状态保存到localStorage	false
`Size`	string	窗格宽度/高度（px或%）	Auto
`Min`	string	窗格最小尺寸	0
`Max`	string	窗格最大尺寸	无限制
`Resizable`	bool	允许调整窗格大小	true
`Collapsible`	bool	显示折叠/展开按钮	false
`Visible`	bool	显示/隐藏窗格	true
`Collapsed`	bool	初始折叠状态	false

Common Use Cases

常见用例

Code Editor Interface — Top panes for code tabs, bottom pane for output. Use nested horizontal splitters in top pane.
Admin Dashboard — Left sidebar for navigation, main area for content. Add right panel for details or settings.
Mail Client — Left pane for folder list, center for email list, right for email content.
Project Management Tool — Multiple collapsible panels for timeline, tasks, and gantt chart.
Data Analysis Dashboard — Resizable panels for charts, tables, and filters with state persistence.

Next Steps:

Start with Getting Started for setup instructions
Read Split Panes to understand layout options
Explore Pane Configuration for customization
Check Advanced Scenarios for complex layouts

代码编辑器界面 — 顶部窗格用于代码标签，底部窗格用于输出。在顶部窗格中使用嵌套水平拆分器。
管理仪表板 — 左侧侧边栏用于导航，主区域用于内容。添加右侧面板用于详情或设置。
邮件客户端 — 左侧窗格用于文件夹列表，中间用于邮件列表，右侧用于邮件内容。
项目管理工具 — 多个可折叠面板，用于时间线、任务和甘特图。
数据分析仪表板 — 可调整大小的面板，用于图表、表格和过滤器，并支持状态持久化。

下一步：

从快速入门开始了解设置说明
阅读拆分窗格以了解布局选项
探索窗格配置进行自定义
查看高级场景了解复杂布局