syncfusion-angular-splitter

实现 Syncfusion Angular Splitter

Splitter 组件会将容器划分为多个可调整大小的窗格，窗格之间由可拖动的分隔条隔开。这样可以灵活创建由用户控制的多窗格布局，适用于仪表板、编辑器和复杂 UI 结构。

何时使用此技能

• 仪表板布局：创建包含可调整大小面板的多列仪表板
• 编辑器界面：构建带有侧面板的文本编辑器、代码编辑器或 IDE
• 导航 + 内容：实现包含主内容区域的侧边栏导航
• 数据探索：设计包含筛选器、预览和详细视图的界面
• 嵌套布局：创建复杂的分层窗格结构
• 动态界面：根据用户操作以编程方式添加或移除窗格
• 响应式分割：同时支持水平和垂直方向
• 受限调整大小：强制执行窗格的最小/最大尺寸，以保持布局稳定

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装和配置软件包
• 独立组件与 NgModule 导入方式
• Splitter 组件基本配置
• CSS 主题导入
• 第一个可运行示例

API 参考（完整）

📄 阅读： references/api-reference.md

• 所有组件属性（orientation、height、width 等）
• 所有窗格属性（size、min、max、collapsible 等）
• 所有公共方法（addPane、removePane、expand、collapse）
• 全部 8 个事件及其参数详情
• 完整的可运行示例

窗格方向与布局

📄 阅读： references/split-panes.md

• 水平布局（默认，窗格并排显示）
• 垂直布局（窗格堆叠，分隔条为水平）
• 多个窗格（单个 splitter 中包含 3 个或更多窗格）
• 嵌套 Splitter（窗格内容中的 splitter）
• 基于模板的窗格内容

窗格大小与配置

📄 阅读： references/pane-sizing.md

• 固定像素大小（200px、300px）
• 响应式百分比大小（30%、50%）
• 自动调整大小（弹性布局，自动分配）
• 单个 splitter 中混合使用不同的大小策略
• 动态调整窗格大小

展开与折叠功能

📄 阅读： references/expand-collapse.md

• 可折叠窗格（用户可点击展开/折叠图标）
• 初始化时处于折叠状态
• 以编程方式调用 expand() 方法
• 以编程方式调用 collapse() 方法
• 动态控制窗格的可见性

调整大小与交互

📄 阅读： references/resizing.md

• 调整大小行为与拖动分隔条
• 固定窗格（不可调整大小，尺寸固定）
• 可调整大小的窗格配置
• 最小/最大尺寸限制（窗格验证）
• 防止无效的调整大小操作

布局模式与示例

📄 阅读： references/layout-patterns.md

• 双窗格侧边栏布局
• 三窗格编辑器布局（左侧边栏、主内容、右侧面板）
• 嵌套 Splitter 和复杂层次结构
• 常见 UI 模式及完整代码示例
• 布局组合策略

样式与自定义

📄 阅读： references/styling-customization.md

• 应用主题（Material3、Bootstrap 等）
• 自定义 CSS 类
• 分隔条样式与尺寸
• 窗格内容样式

全球化与本地化

📄 阅读： references/globalization.md

• 从右到左（RTL）语言支持（阿拉伯语、希伯来语）
• 区域设置和文化配置
• 文本方向属性
• 多语言内容
• 区域设置感知格式化

内容加载

📄 阅读： references/content-loading.md

• HTML 元素内容
• 通过 content 属性设置字符串内容
• ng-template 内容（基于模板）
• DOM 选择器内容（外部 HTML）
• 动态更新内容

动态窗格操作

📄 阅读： references/dynamic-manipulation.md

• 使用 addPane() 方法添加窗格
• 使用 removePane() 方法移除窗格
• 窗格配置和属性
• 动态窗格状态管理
• 方法和事件参考
• 操作期间的限制

安全最佳实践

📄 阅读： references/security-best-practices.md

• HTML 清理和 XSS 防护
• enableHtmlSanitizer 属性的用法
• 内容验证模式
• 安全的内容来源和排序
• 应避免的常见漏洞
• 安全的代码示例

---

快速入门

基本的双窗格布局

import { Component } from '@angular/core';
import { SplitterModule } from '@syncfusion/ej2-angular-layouts';

@Component({
  selector: 'app-splitter',
  standalone: true,
  imports: [SplitterModule],
  template: `
    <ejs-splitter height="400px" width="100%">
      <e-panes>
        <e-pane size="300px">
          <ng-template #content>
            <div>Left Pane</div>
          </ng-template>
        </e-pane>
        <e-pane size="300px">
          <ng-template #content>
            <div>Right Pane</div>
          </ng-template>
        </e-pane>
      </e-panes>
    </ejs-splitter>
  `
})
export class SplitterComponent {}

带可折叠窗格的垂直布局

import { Component } from '@angular/core';
import { SplitterModule } from '@syncfusion/ej2-angular-layouts';

@Component({
  selector: 'app-vertical-splitter',
  standalone: true,
  imports: [SplitterModule],
  template: `
    <ejs-splitter orientation="Vertical" height="400px" width="100%">
      <e-panes>
        <e-pane size="150px" [collapsible]="true">
          <ng-template #content>
            <div>Header Panel</div>
          </ng-template>
        </e-pane>
        <e-pane [collapsible]="true">
          <ng-template #content>
            <div>Content Area</div>
          </ng-template>
        </e-pane>
      </e-panes>
    </ejs-splitter>
  `
})
export class VerticalSplitterComponent {}

常见模式

侧边栏 + 内容布局

经典的双窗格布局，包含固定侧边栏和灵活的内容区域：

<ejs-splitter height="500px" width="100%">
  <e-panes>
    
    <e-pane size="250px">
      <ng-template #content>
        <div class="sidebar">
          <ul>
            <li>Navigation Item 1</li>
            <li>Navigation Item 2</li>
          </ul>
        </div>
      </ng-template>
    </e-pane>
    
    <e-pane>
      <ng-template #content>
        <div class="content">Main Content Area</div>
      </ng-template>
    </e-pane>
  </e-panes>
</ejs-splitter>

基于百分比的响应式布局

根据容器大小调整窗格：

<ejs-splitter height="400px" width="100%">
  <e-panes>
    <e-pane size="25%">
      <ng-template #content>25% Panel</ng-template>
    </e-pane>
    <e-pane size="50%">
      <ng-template #content>50% Panel</ng-template>
    </e-pane>
    <e-pane size="25%">
      <ng-template #content>25% Panel</ng-template>
    </e-pane>
  </e-panes>
</ejs-splitter>

可折叠的仪表板面板

带有展开/折叠图标的窗格，适用于紧凑型 UI：

<ejs-splitter height="500px" width="100%">
  <e-panes>
    <e-pane size="200px" [collapsible]="true">
      <ng-template #content>
        <div>Filters Panel (Collapsible)</div>
      </ng-template>
    </e-pane>
    <e-pane [collapsible]="true">
      <ng-template #content>
        <div>Main Dashboard</div>
      </ng-template>
    </e-pane>
    <e-pane size="300px" [collapsible]="true">
      <ng-template #content>
        <div>Details Panel (Collapsible)</div>
      </ng-template>
    </e-pane>
  </e-panes>
</ejs-splitter>

主要功能

功能	用途	使用场景
方向	水平或垂直窗格布局	根据 UI 设计需求选择
窗格尺寸	固定像素、百分比或自动	混合不同的尺寸策略以实现响应式布局
可折叠	由用户控制展开/折叠	在仪表板和编辑器中节省空间
固定窗格	尺寸固定且不可调整的窗格	创建稳定的参考区域（侧边栏）
最小/最大限制	强制执行窗格尺寸限制	防止调整尺寸时布局错乱
嵌套分隔器	分隔器嵌套在分隔器窗格中	创建复杂的分层布局
动态操作	以编程方式添加/移除窗格	根据用户操作或数据变化调整 UI
内容灵活性	HTML、字符串、模板、选择器	将任意类型的内容加载到窗格中
主题和样式	多种内置主题	在整个应用中应用统一的设计

相关技能

• 数据网格 - 在分隔器窗格中显示表格数据
• 图表和可视化 - 在拆分布局中嵌入仪表板和分析内容
• 导航组件 - 使用分隔器构建侧边栏和导航结构

---

后续步骤： 根据具体使用场景选择参考文件，然后参阅其中提供的代码片段和示例。