Back to Details

syncfusion-angular-splitter

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Splitter

实现Syncfusion Angular Splitter

The Splitter component divides a container into resizable panes separated by draggable separator bars. This enables flexible, user-controllable multi-pane layouts for dashboards, editors, and complex UI structures.
Splitter组件会将容器划分为多个可调整大小的面板，面板之间由可拖动的分隔条隔开。这可为仪表板、编辑器和复杂UI结构实现灵活的、用户可控的多面板布局。

When to Use This Skill

何时使用此技能

  • Dashboard layouts: Create multi-column dashboards with resizable panels
  • Editor interfaces: Build text editors, code editors, or IDEs with side panels
  • Navigation + content: Implement sidebar navigation with main content area
  • Data exploration: Design interfaces with filters, previews, and detailed views
  • Nested layouts: Create complex hierarchical pane structures
  • Dynamic interfaces: Add/remove panes programmatically based on user actions
  • Responsive splitting: Support both horizontal and vertical orientations
  • Constrained resizing: Enforce min/max pane sizes for layout stability
  • 仪表板布局：创建带有可调整大小面板的多列仪表板
  • 编辑器界面：构建带有侧边面板的文本编辑器、代码编辑器或IDE
  • 导航+内容：实现侧边栏导航搭配主内容区域的结构
  • 数据探索：设计包含筛选器、预览区和详情视图的界面
  • 嵌套布局：创建复杂的层级面板结构
  • 动态界面：根据用户操作以编程方式添加/移除面板
  • 响应式拆分：支持横向和纵向两种方向
  • 约束性调整：为布局稳定性设置面板的最小/最大尺寸

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md
  • Package installation and setup
  • Standalone component vs NgModule imports
  • Basic Splitter component setup
  • CSS theme imports
  • First working example
📄 阅读： references/getting-started.md
  • 包安装与设置
  • 独立组件 vs NgModule 导入
  • 基础Splitter组件设置
  • CSS主题导入
  • 第一个可运行示例

API Reference (Complete)

完整API参考

📄 Read: references/api-reference.md
  • All component properties (orientation, height, width, etc.)
  • All pane properties (size, min, max, collapsible, etc.)
  • All public methods (addPane, removePane, expand, collapse)
  • All 8 events with argument details
  • Complete working examples
📄 阅读： references/api-reference.md
  • 所有组件属性（orientation、height、width等）
  • 所有面板属性（size、min、max、collapsible等）
  • 所有公共方法（addPane、removePane、expand、collapse）
  • 包含参数详情的全部8个事件
  • 完整可运行示例

Pane Orientation & Layout

面板方向与布局

📄 Read: references/split-panes.md
  • Horizontal layout (default, side-by-side panes)
  • Vertical layout (stacked panes with horizontal separator)
  • Multiple panes (3+ panes in single splitter)
  • Nested splitters (splitter within pane content)
  • Template-based pane content
📄 阅读： references/split-panes.md
  • 横向布局（默认，面板并排）
  • 纵向布局（面板堆叠，带横向分隔条）
  • 多面板（单个Splitter中包含3个及以上面板）
  • 嵌套Splitter（面板内容内部嵌套Splitter）
  • 基于模板的面板内容

Pane Sizing & Configuration

面板尺寸与配置

📄 Read: references/pane-sizing.md
  • Fixed pixel sizing (200px, 300px)
  • Responsive percentage sizing (30%, 50%)
  • Auto-sizing (flex layout, automatic distribution)
  • Mixed sizing strategies in single splitter
  • Dynamic pane size adjustments
📄 阅读： references/pane-sizing.md
  • 固定像素尺寸（200px、300px）
  • 响应式百分比尺寸（30%、50%）
  • 自动尺寸（弹性布局，自动分配空间）
  • 单个Splitter中混合使用多种尺寸策略
  • 动态调整面板尺寸

Expand & Collapse Functionality

展开与折叠功能

📄 Read: references/expand-collapse.md
  • Collapsible panes (user-clickable expand/collapse icons)
  • Collapsed state on initialization
  • Programmatic 
    expand()
    method
  • Programmatic 
    collapse()
    method
  • Dynamic pane visibility control
📄 阅读： references/expand-collapse.md
  • 可折叠面板（用户可点击展开/折叠图标）
  • 初始化时处于折叠状态
  • 程序化
    expand()
    方法
  • 程序化
    collapse()
    方法
  • 动态控制面板可见性

Resizing & Interaction

调整大小与交互

📄 Read: references/resizing.md
  • Resize behavior and dragging separator
  • Fixed panes (non-resizable, static size)
  • Resizable pane configuration
  • Min/max size constraints (pane validation)
  • Preventing invalid resize operations
📄 阅读： references/resizing.md
  • 调整大小行为与拖动分隔条
  • 固定面板（不可调整大小，尺寸静态）
  • 可调整大小的面板配置
  • 最小/最大尺寸约束（面板验证）
  • 防止无效的调整大小操作

Layout Patterns & Recipes

布局模式与实践方案

📄 Read: references/layout-patterns.md
  • Two-pane sidebar layouts
  • Three-pane editor layouts (left sidebar, main content, right panel)
  • Nested splitters and complex hierarchies
  • Common UI patterns with complete code examples
  • Layout composition strategies
📄 阅读： references/layout-patterns.md
  • 双面板侧边栏布局
  • 三面板编辑器布局（左侧边栏、主内容区、右侧面板）
  • 嵌套Splitter与复杂层级结构
  • 带有完整代码示例的常见UI模式
  • 布局组合策略

Styling & Customization

样式与自定义

📄 Read: references/styling-customization.md
  • Theme application (Material3, Bootstrap, etc.)
  • CSS class customization
  • Separator styling and sizing
  • Pane content styling
📄 阅读： references/styling-customization.md
  • 主题应用（Material3、Bootstrap等）
  • CSS类自定义
  • 分隔条样式与尺寸设置
  • 面板内容样式

Globalization & Localization

全球化与本地化

📄 Read: references/globalization.md
  • Right-to-left (RTL) language support (Arabic, Hebrew)
  • Locale and culture configuration
  • Text direction attributes
  • Multi-language content
  • Locale-aware formatting
📄 阅读： references/globalization.md
  • 从右到左（RTL）语言支持（阿拉伯语、希伯来语）
  • 区域设置与文化配置
  • 文本方向属性
  • 多语言内容
  • 感知区域设置的格式化

Content Loading

内容加载

📄 Read: references/content-loading.md
  • HTML element content
  • String content via 
    content
    property
  • ng-template content (template-based)
  • DOM selector content (external HTML)
  • Dynamic content updates
📄 阅读： references/content-loading.md
  • HTML元素内容
  • 通过
    content
    属性设置字符串内容
  • ng-template内容（基于模板）
  • DOM选择器内容（外部HTML）
  • 动态内容更新

Dynamic Pane Manipulation

动态面板操作

📄 Read: references/dynamic-manipulation.md
  • Adding panes with 
    addPane()
    method
  • Removing panes with 
    removePane()
    method
  • Pane configuration and properties
  • Dynamic pane state management
  • Methods and events reference
  • Constraints during manipulation
📄 阅读： references/dynamic-manipulation.md
  • 使用
    addPane()
    方法添加面板
  • 使用
    removePane()
    方法移除面板
  • 面板配置与属性
  • 动态面板状态管理
  • 方法与事件参考
  • 操作时的约束条件

Security Best Practices

安全最佳实践

📄 Read: references/security-best-practices.md
  • HTML sanitization and XSS prevention
  • enableHtmlSanitizer
    property usage
  • Content validation patterns
  • Safe content sources and ranking
  • Common vulnerabilities to avoid
  • Secure code examples
📄 阅读： references/security-best-practices.md
  • HTML清理与XSS防护
  • enableHtmlSanitizer
    属性的使用
  • 内容验证模式
  • 安全内容来源与分级
  • 需要避免的常见漏洞
  • 安全代码示例

Quick Start

快速开始

Basic Two-Pane Layout

基础双面板布局

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

Vertical Layout with Collapsible Panes

带可折叠面板的纵向布局

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

Common Patterns

常见模式

Sidebar + Content Layout

侧边栏+内容布局

The classic two-pane layout with a fixed sidebar and flexible content area:
typescript
<ejs-splitter height="500px" width="100%">
  <e-panes>
    <!-- Fixed sidebar -->
    <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>
    <!-- Flexible content -->
    <e-pane>
      <ng-template #content>
        <div class="content">Main Content Area</div>
      </ng-template>
    </e-pane>
  </e-panes>
</ejs-splitter>
经典的双面板布局，包含固定侧边栏和灵活内容区：
typescript
<ejs-splitter height="500px" width="100%">
  <e-panes>
    <!-- Fixed sidebar -->
    <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>
    <!-- Flexible content -->
    <e-pane>
      <ng-template #content>
        <div class="content">Main Content Area</div>
      </ng-template>
    </e-pane>
  </e-panes>
</ejs-splitter>

Responsive Percentage-Based Layout

响应式百分比布局

Panes that resize based on container size:
typescript
<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>
面板尺寸随容器大小调整：
typescript
<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>

Collapsible Dashboard Panels

可折叠仪表板面板

Panes with expand/collapse icons for compact UI:
typescript
<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：
typescript
<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>

Key Features

核心功能

FeaturePurposeWhen to Use
OrientationHorizontal or vertical pane layoutChoose based on UI design needs
Pane SizingFixed pixels, percentages, or autoMix sizing strategies for responsive layouts
CollapsibleUser-controlled expand/collapseSave space in dashboards and editors
Fixed PanesNon-resizable panes with static sizeCreate stable reference areas (sidebars)
Min/Max ConstraintsEnforce pane size limitsPrevent layout breaking during resize
Nested SplittersSplitter within splitter panesCreate complex hierarchical layouts
Dynamic ManipulationAdd/remove panes programmaticallyAdapt UI to user actions or data changes
Content FlexibilityHTML, strings, templates, selectorsLoad any type of content into panes
Themes & StylingMultiple built-in themesApply consistent design across app
功能用途使用场景
Orientation横向或纵向面板布局根据UI设计需求选择
Pane Sizing固定像素、百分比或自动尺寸混合使用尺寸策略实现响应式布局
Collapsible用户可控的展开/折叠在仪表板和编辑器中节省空间
Fixed Panes不可调整大小的静态面板创建稳定的参考区域（如侧边栏）
Min/Max Constraints强制面板尺寸限制调整大小时防止布局崩溃
Nested Splitters面板内部嵌套Splitter创建复杂的层级布局
Dynamic Manipulation以编程方式添加/移除面板根据用户操作或数据变化适配UI
Content FlexibilityHTML、字符串、模板、选择器向面板加载任意类型内容
Themes & Styling多种内置主题在应用中应用一致的设计风格

Related Skills

相关技能

  • Data Grids - Display tabular data within splitter panes
  • Charts & Visualization - Embed dashboards and analytics in split layouts
  • Navigation Components - Build sidebars and navigation structures with splitter
Next Steps: Choose a reference file based on your specific use case, then refer to the code snippets and examples provided.
  • Data Grids - 在Splitter面板中显示表格数据
  • Charts & Visualization - 在拆分布局中嵌入仪表板和分析内容
  • Navigation Components - 使用Splitter构建侧边栏和导航结构
下一步： 根据你的具体用例选择参考文件，然后参考其中提供的代码片段和示例。