syncfusion-aspnetcore-splitter

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion ASP.NET Core Splitter

实现Syncfusion ASP.NET Core Splitter

When to Use This Skill

何时使用此技能

Use this skill when you need to:

Create responsive multi-pane layouts with the Splitter component
Configure horizontal and vertical split panes
Set up pane sizing (pixels, percentages, auto)
Enable or disable pane resizing with min/max constraints
Add HTML, plain text, or Syncfusion controls as pane content
Implement expand/collapse functionality for panes
Build nested splitters for complex layouts
Customize splitter styling and appearance
Enable RTL (right-to-left) support for globalization

当你需要以下功能时，请使用此技能：

使用Splitter组件创建响应式多窗格布局
配置水平和垂直拆分窗格
设置窗格尺寸（像素、百分比、自动）
启用或禁用带最小/最大约束的窗格调整大小功能
添加HTML、纯文本或Syncfusion控件作为窗格内容
实现窗格的展开/折叠功能
为复杂布局构建嵌套拆分器
自定义拆分器的样式和外观
为全球化启用RTL（从右到左）支持

Component Overview

组件概述

The Syncfusion ASP.NET Core Splitter is a layout/container control that allows you to create complex multi-pane applications. It supports:

Multiple panes with horizontal and vertical orientations
Flexible sizing using pixels, percentages, or automatic sizing
Resizable panes with drag handles and min/max constraints
Collapsible panes with expand/collapse buttons
Rich content including HTML, text, and other Syncfusion controls
Nested splitters for hierarchical layout architectures
Customizable styling and RTL support

Syncfusion ASP.NET Core Splitter是一个布局/容器控件，可用于创建复杂的多窗格应用程序。它支持：

多窗格，支持水平和垂直方向
灵活的尺寸设置，可使用像素、百分比或自动尺寸
可调整大小的窗格，带有拖动手柄和最小/最大约束
可折叠的窗格，带有展开/折叠按钮
丰富的内容，包括HTML、文本和其他Syncfusion控件
嵌套拆分器，用于分层布局架构
可自定义的样式和RTL支持

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

NuGet package installation
Tag helper registration
Stylesheet and script setup
Creating your first splitter
Basic two-pane configuration
Orientation setup

📄 阅读： references/getting-started.md

NuGet包安装
标签助手注册
样式表和脚本设置
创建你的第一个拆分器
基础双窗格配置
方向设置

Split Pane Layouts

拆分窗格布局

📄 Read: references/split-pane-layouts.md

Horizontal vs vertical layouts
Multiple pane configurations
Separator customization
Nested splitter implementation
Layout patterns for complex designs

📄 阅读： references/split-pane-layouts.md

水平与垂直布局对比
多窗格配置
分隔符自定义
嵌套拆分器实现
复杂设计的布局模式

Pane Content

窗格内容

📄 Read: references/pane-content.md

HTML markup as pane content
Syncfusion controls within panes
Plain text content
Content templates
Selector-based content loading
JavaScript initialization approach (Accordion + ListView)

📄 阅读： references/pane-content.md

将HTML标记作为窗格内容
窗格内的Syncfusion控件
纯文本内容
内容模板
基于选择器的内容加载
JavaScript初始化方法（Accordion + ListView）

Pane Sizing and Resizing

窗格尺寸与调整大小

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

Pixel-based pane sizing
Percentage-based sizing
Auto-sizing panes
Min/max size constraints
Enabling/disabling resize
Resize events and gripper customization

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

基于像素的窗格尺寸设置
基于百分比的尺寸设置
自动尺寸窗格
最小/最大尺寸约束
启用/禁用调整大小
调整大小事件和抓手自定义

Expand and Collapse

展开与折叠

📄 Read: references/expand-collapse.md

Collapsible pane configuration
Programmatic expand/collapse methods
Initial collapsed state
Expand/collapse events

📄 阅读： references/expand-collapse.md

可折叠窗格配置
程序化展开/折叠方法
初始折叠状态
展开/折叠事件

Styling and Globalization

样式与全球化

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

CSS customization for split bars
Resize handle styling
Custom themes
RTL (right-to-left) support
Accessibility features

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

拆分栏的CSS自定义
调整大小手柄的样式
自定义主题
RTL（从右到左）支持
辅助功能特性

API Reference

API参考

📄 Read: references/api-reference.md

Complete Splitter properties documentation
Pane properties with examples
Methods (expand, collapse, addPane, removePane)
All events with event handlers
Event argument objects and properties
Complete working examples

📄 阅读： references/api-reference.md

完整的Splitter属性文档
带示例的窗格属性
方法（expand、collapse、addPane、removePane）
所有事件及事件处理程序
事件参数对象和属性
完整的工作示例

Quick Start Example

快速入门示例

csharp

<!-- _Layout.cshtml -->
<head>
    <link rel="stylesheet" href="url" />
    <script src="url"></script>
</head>

<body>
    @RenderBody()
    <ejs-scripts></ejs-scripts>
</body>

csharp

<!-- Index.cshtml -->
@addTagHelper *, Syncfusion.EJ2

<ejs-splitter id="splitter" height="400px">
    <e-splitter-panes>
        <e-splitter-pane size="50%">
            <div class="content">
                <h3>Pane 1</h3>
                <p>Left pane content</p>
            </div>
        </e-splitter-pane>
        <e-splitter-pane size="50%">
            <div class="content">
                <h3>Pane 2</h3>
                <p>Right pane content</p>
            </div>
        </e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>

csharp

<!-- _Layout.cshtml -->
<head>
    <link rel="stylesheet" href="url" />
    <script src="url"></script>
</head>

<body>
    @RenderBody()
    <ejs-scripts></ejs-scripts>
</body>

csharp

<!-- Index.cshtml -->
@addTagHelper *, Syncfusion.EJ2

<ejs-splitter id="splitter" height="400px">
    <e-splitter-panes>
        <e-splitter-pane size="50%">
            <div class="content">
                <h3>Pane 1</h3>
                <p>Left pane content</p>
            </div>
        </e-splitter-pane>
        <e-splitter-pane size="50%">
            <div class="content">
                <h3>Pane 2</h3>
                <p>Right pane content</p>
            </div>
        </e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>

Common Patterns

常见模式

Two-Pane Layout (Left Navigation + Content)

双窗格布局（左侧导航 + 内容）

csharp

<ejs-splitter id="splitter" height="600px">
    <e-splitter-panes>
        <e-splitter-pane size="25%" min="20%"></e-splitter-pane>
        <e-splitter-pane size="75%" min="40%"></e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>

csharp

<ejs-splitter id="splitter" height="600px">
    <e-splitter-panes>
        <e-splitter-pane size="25%" min="20%"></e-splitter-pane>
        <e-splitter-pane size="75%" min="40%"></e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>

Three-Pane Layout (Master, Detail, Preview)

三窗格布局（主视图、详情、预览）

csharp

<ejs-splitter id="splitter" height="600px">
    <e-splitter-panes>
        <e-splitter-pane size="30%" min="20%"></e-splitter-pane>
        <e-splitter-pane size="40%" min="25%"></e-splitter-pane>
        <e-splitter-pane size="30%" min="20%"></e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>

csharp

<ejs-splitter id="splitter" height="600px">
    <e-splitter-panes>
        <e-splitter-pane size="30%" min="20%"></e-splitter-pane>
        <e-splitter-pane size="40%" min="25%"></e-splitter-pane>
        <e-splitter-pane size="30%" min="20%"></e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>

Vertical Stack (Header, Main, Footer)

垂直堆叠（页眉、主体、页脚）

csharp

<ejs-splitter id="splitter" height="600px" orientation="Vertical">
    <e-splitter-panes>
        <e-splitter-pane size="15%" min="50px"></e-splitter-pane>
        <e-splitter-pane size="70%" min="100px"></e-splitter-pane>
        <e-splitter-pane size="15%" min="50px"></e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>

csharp

<ejs-splitter id="splitter" height="600px" orientation="Vertical">
    <e-splitter-panes>
        <e-splitter-pane size="15%" min="50px"></e-splitter-pane>
        <e-splitter-pane size="70%" min="100px"></e-splitter-pane>
        <e-splitter-pane size="15%" min="50px"></e-splitter-pane>
    </e-splitter-panes>
</ejs-splitter>

Key Pane Configuration Properties

关键窗格配置属性

Property	Type	Purpose
`size`	string	Pane size in pixels ( `"200px"` ) or percentage ( `"50%"` )
`min`	string	Minimum size to prevent over-resizing
`max`	string	Maximum size to limit expansion
`resizable`	bool	Enable/disable resize for this pane (default: true)
`collapsible`	bool	Enable/disable collapse button (default: false)
`collapsed`	bool	Initial collapsed state (default: false)
`content`	string	HTML or text content for pane

属性	类型	用途
`size`	string	窗格尺寸，单位为像素（ `"200px"` ）或百分比（ `"50%"` ）
`min`	string	最小尺寸，防止过度调整大小
`max`	string	最大尺寸，限制扩展
`resizable`	bool	启用/禁用此窗格的调整大小功能（默认值：true）
`collapsible`	bool	启用/禁用折叠按钮（默认值：false）
`collapsed`	bool	初始折叠状态（默认值：false）
`content`	string	窗格的HTML或文本内容

Common Use Cases

常见用例

Code Editor Layout - Split code editor with preview/output pane
Dashboard - Multiple sections with resizable panels
Email Client - Folder list, message list, message detail
IDE Interface - Project explorer, editor, properties panel
Document Editor - Ribbon, canvas, properties, preview
File Manager - Tree view, file list, preview
Chat Application - Conversation list, chat area, user info

代码编辑器布局 - 带有预览/输出窗格的拆分式代码编辑器
仪表板 - 包含多个可调整大小面板的多区域布局
邮件客户端 - 文件夹列表、消息列表、消息详情
IDE界面 - 项目资源管理器、编辑器、属性面板
文档编辑器 - 功能区、画布、属性设置、预览
文件管理器 - 树形视图、文件列表、预览
聊天应用 - 对话列表、聊天区域、用户信息

Next Steps

下一步操作

Review the Getting Started guide for installation and basic setup
Choose your layout pattern from Split Pane Layouts
Configure pane sizing in Pane Sizing and Resizing
Add rich content using Pane Content options
Implement advanced features like Expand and Collapse
Apply custom styling from Styling and Globalization

查看入门指南了解安装和基础设置
从拆分窗格布局中选择你的布局模式
在窗格尺寸与调整大小中配置窗格尺寸
使用窗格内容选项添加丰富内容
实现展开与折叠等高级功能
应用样式与全球化中的自定义样式