syncfusion-aspnetcore-splitter

实现 Syncfusion ASP.NET Core Splitter

何时使用此技能

在以下情况下使用此技能：

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

组件概述

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

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

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装 NuGet 包
• 注册标记帮助程序
• 设置样式表和脚本
• 创建第一个 Splitter
• 基本双窗格配置
• 设置方向

分割窗格布局

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

• 水平布局与垂直布局
• 多窗格配置
• 自定义分隔条
• 实现嵌套 Splitter
• 复杂设计的布局模式

窗格内容

📄 阅读： references/pane-content.md

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

窗格尺寸与调整大小

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

• 基于像素的窗格尺寸
• 基于百分比的尺寸
• 自动调整窗格尺寸
• 最小值／最大值尺寸限制
• 启用／禁用大小调整
• 大小调整事件和抓手自定义

展开与折叠

📄 阅读： references/expand-collapse.md

• 配置可折叠窗格
• 以编程方式调用展开／折叠方法
• 初始折叠状态
• 展开／折叠事件

样式与全球化

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

• 自定义分隔条 CSS
• 调整大小手柄样式
• 自定义主题
• RTL（从右到左）支持
• 无障碍功能

API 参考

📄 阅读： references/api-reference.md

• 完整的 Splitter 属性文档
• 窗格属性及示例
• 方法（expand、collapse、addPane、removePane）
• 所有事件及其事件处理程序
• 事件参数对象及属性
• 完整的可运行示例

快速入门示例

<head>
    <link rel="stylesheet" href="url" />
    <script src="url"></script>
</head>

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

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

常见模式

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

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

三窗格布局（主窗格、详细信息、预览）

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

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

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

关键窗格配置属性

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

常见用例

1. 代码编辑器布局 - 将代码编辑器与预览／输出窗格拆分显示
2. 仪表板 - 包含多个可调整大小窗格的区域
3. 邮件客户端 - 文件夹列表、邮件列表、邮件详情
4. IDE 界面 - 项目浏览器、编辑器、属性窗格
5. 文档编辑器 - 功能区、画布、属性、预览
6. 文件管理器 - 树视图、文件列表、预览
7. 聊天应用 - 对话列表、聊天区域、用户信息

后续步骤

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