OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add syncfusion/angular-ui-components-skills --skill syncfusion-angular-splitter
Create resizable, multi-pane layouts with Syncfusion Angular Splitter. Use this skill whenever the user wants to build split-pane interfaces, create dashboard layouts, implement sidebar+content patterns, or manage dynamic pane structures. Include scenarios involving horizontal/vertical splitting, collapsible panes, pane resizing, dynamic pane addition/removal, or complex nested layouts. Perfect for creating flexible UI layouts that adapt to user interaction.
npx skills add syncfusion/angular-ui-components-skills --skill 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.
📄 Read: references/getting-started.md
📄 Read: references/api-reference.md
📄 Read: references/split-panes.md
📄 Read: references/pane-sizing.md
📄 Read: references/expand-collapse.md
expand() methodcollapse() method📄 Read: references/resizing.md
📄 Read: references/layout-patterns.md
📄 Read: references/styling-customization.md
📄 Read: references/globalization.md
📄 Read: references/content-loading.md
content property📄 Read: references/dynamic-manipulation.md
addPane() methodremovePane() method📄 Read: references/security-best-practices.md
enableHtmlSanitizer property usageThe classic two-pane layout with a fixed sidebar and flexible content area:
Panes that resize based on container size:
Panes with expand/collapse icons for compact UI:
| Feature | Purpose | When to Use |
|---|---|---|
| Orientation | Horizontal or vertical pane layout | Choose based on UI design needs |
| Pane Sizing | Fixed pixels, percentages, or auto | Mix sizing strategies for responsive layouts |
| Collapsible | User-controlled expand/collapse | Save space in dashboards and editors |
| Fixed Panes | Non-resizable panes with static size | Create stable reference areas (sidebars) |
| Min/Max Constraints | Enforce pane size limits | Prevent layout breaking during resize |
| Nested Splitters | Splitter within splitter panes | Create complex hierarchical layouts |
| Dynamic Manipulation | Add/remove panes programmatically | Adapt UI to user actions or data changes |
| Content Flexibility | HTML, strings, templates, selectors | Load any type of content into panes |
| Themes & Styling | Multiple built-in themes | Apply consistent design across app |
Next Steps: Choose a reference file based on your specific use case, then refer to the code snippets and examples provided.
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>
<!-- 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><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><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>