syncfusion-angular-splitter

用途

Syncfusion Angular Splitter 用于把页面容器划分为多个可调整大小的窗格，窗格之间由可拖动的分隔条分隔，从而构建用户可自行控制的多窗格布局。它适合仪表盘、编辑器、IDE、侧边导航加主内容区、数据浏览（筛选、预览、详情）以及嵌套的层级式布局等场景。

主要能力

方向与布局：支持水平（默认，并排窗格）与垂直（堆叠窗格，水平分隔条）两种方向；支持 3 个及以上多窗格、窗格内嵌套 Splitter、基于模板的窗格内容。
窗格尺寸：支持固定像素（如 200px、300px）、响应式百分比（如 30%、50%）、自动尺寸（flex 布局自动分配），并可在同一 Splitter 中混用多种尺寸策略，也可动态调整窗格大小。
展开与折叠：窗格可设为可折叠，提供用户可点击的展开/折叠图标；支持初始化时即为折叠状态，以及通过 expand()、collapse() 方法以编程方式控制，并可动态控制窗格可见性。
调整大小与交互：支持拖动分隔条调整大小、将窗格设为固定（不可调整）、配置可调整窗格，以及通过最小/最大尺寸约束防止无效调整导致布局破坏。
动态操作：通过 addPane() 添加窗格、removePane() 移除窗格，支持窗格配置与属性设置、动态状态管理，以及操作过程中的约束处理。
内容加载：支持 HTML 元素内容、通过 content 属性传入字符串、ng-template 模板内容、DOM 选择器加载外部 HTML，以及动态内容更新。
样式与主题：支持 Material3、Bootstrap 等内置主题，可自定义 CSS 类、分隔条样式与尺寸、窗格内容样式。
全球化：支持从右到左（RTL）语言（如阿拉伯语、希伯来语）、区域与文化配置、文本方向属性、多语言内容与区域感知格式化。
安全：提供 HTML 净化与 XSS 防护，使用 enableHtmlSanitizer 属性、内容验证模式、安全内容来源，并列出应避免的常见漏洞。

使用方式

该技能以参考文档形式组织，按主题拆分为多个文件，包括：getting-started.md（包安装与设置、独立组件与 NgModule 导入、基础设置、CSS 主题导入、首个可用示例）、api-reference.md（全部组件属性、窗格属性、公开方法与 8 个事件及参数）、split-panes.md、pane-sizing.md、expand-collapse.md、resizing.md、layout-patterns.md、styling-customization.md、globalization.md、content-loading.md、dynamic-manipulation.md、security-best-practices.md。使用时根据具体场景选择对应参考文件，再参照其中的代码片段与示例。

基础用法示例（两窗格布局）：

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

常见模式包括：侧边栏加内容布局（固定侧边栏 + 弹性内容区）、响应式百分比布局（25%/50%/25%）、可折叠仪表盘面板（带展开/折叠图标）。

适用场景

仪表盘布局：多列可调整面板。
编辑器界面：文本编辑器、代码编辑器或 IDE 的侧面板。
导航加内容：侧边栏导航与主内容区。
数据探索：筛选、预览与详情视图组合。
嵌套布局：复杂层级窗格结构。
动态界面：根据用户操作以编程方式增删窗格。
响应式分栏：同时支持水平与垂直方向。
受约束调整：通过最小/最大尺寸保证布局稳定。

限制

资料未提供该组件的收费、价格、平台兼容版本、性能指标或效果数据，暂未提供相关信息。

技能介绍

用途

主要能力

使用方式

适用场景

限制