syncfusion-javascript-splitter
Implementing Syncfusion TypeScript Splitter
The Syncfusion Splitter control enables you to create complex, responsive multi-pane layouts in web applications. It provides built-in resizing, collapse/expand functionality, comprehensive event handling, and support for nested panes with full programmatic control.
When to Use This Skill
- Setting up a Splitter: Initial configuration, dependency installation, basic initialization
- Configuring panes: Sizing (pixels/percentages), fixed vs flexible panes, min/max constraints
- Orientation: Horizontal vs vertical layouts
- Interactive features: Collapse/expand panes, programmatic control, dynamic pane management
- Content: Loading HTML markup, text content, or dynamic content
- Resizing: Configuring resize behavior, preventing resize, handling resize events
- Styling: Customizing split bars, resize handles, arrows, colors
- Complex layouts: Nested splitters, code editor layouts, multi-level pane hierarchies
- Internationalization: Right-to-left (RTL) support for Arabic, Hebrew, and other RTL languages
- Event Handling: Working with all Splitter events (before/after expand/collapse, resize, creation)
- API Methods: Programmatically manipulating splitter state (add/remove panes, expand/collapse, refresh)
- Advanced Configuration: Persistence, sanitization, pane reordering, locale management
More from syncfusion/javascript-ui-controls-skills
syncfusion-javascript-gantt-chart
Implement Syncfusion Gantt Chart using JavaScript/TypeScript (Essential JS 2). Use this when working with ej2-gantt component for project scheduling, task dependencies, and timeline management. Covers full Gantt implementation including data binding, task scheduling, columns, resources, timeline configuration, WBS, resource view, critical path, baseline tracking, filtering, sorting, editing, and export functionality (Excel/PDF).
10syncfusion-javascript-maps
Guide to implementing Syncfusion Maps in TypeScript and JavaScript. Use this skill whenever the user needs to create interactive maps, add markers, visualize geographical data, work with map layers, apply color mapping, add annotations, configure legends, or handle map interactions and events. Works with TypeScript (module-based) and JavaScript (CDN/ES5).
9syncfusion-javascript-accumulation-chart
Implements Syncfusion JavaScript accumulation charts (Pie, Doughnut, Funnel, Pyramid) for proportional and percentage-based visualizations. Use when displaying categorical or proportional data. Covers legend and label configuration, interactivity, accessibility, and customization. Works with TypeScript (modules) and JavaScript (CDN/ES5).
9syncfusion-javascript-rich-text-editor
Implements the Syncfusion Rich Text Editor and Markdown Editor using TypeScript (ej2-richtexteditor). Supports both HTML (WYSIWYG) and Markdown modes via editorMode on a single RichTextEditor class. Use this skill for toolbar setup, image/media/table handling, inline or iframe editing, AI assistant, smart editing, import/export, and all content editor scenarios.
9syncfusion-javascript-chart
Implements Syncfusion JavaScript chart controls (Line, Area, Bar, Column, Pie, Polar, Radar, Waterfall, Stock). Use when building interactive data visualizations, dashboards, or real-time charts. Covers series and axes configuration, styling, animations, exporting, and technical indicators. Works with TypeScript (webpack/modules) and JavaScript (CDN/ES5).
9syncfusion-javascript-dropdowns
Comprehensive guide for implementing Syncfusion TypeScript dropdown components including AutoComplete, ComboBox, Mention, Dropdownlist and Multiselect. Use this when building selection interfaces, data binding, filtering, cascading dropdowns, custom templates, and accessible dropdown experiences.
8