Implementing Syncfusion Blazor Splitter

When to Use This Skill

• Create split layouts — Divide your UI into multiple panes (2, 3, or more) that users can resize
• Handle pane configurations — Control pane sizing, minimum/maximum constraints, visibility, and collapsibility
• Manage user interactions — Respond to resize events, collapse/expand actions, and state changes
• Build complex interfaces — Create code editor layouts, dashboard panels, or multi-section dashboards
• Persist pane state — Save and restore pane sizes and collapse states across page refreshes
• Apply custom styling — Customize split bars, resize handles, and overall component appearance

Component Overview

• Default: Horizontal orientation with vertical separators (left-to-right split)
• Vertical mode: Vertical orientation with horizontal separators (top-to-bottom split)
• Nested splitters: Support for complex layouts by nesting splitters within panes
• Resizable: Users drag separators to adjust pane sizes in real-time
• Collapsible: Optional collapse/expand buttons to hide panes and recover space
• Persistent: Built-in state persistence to localStorage for user preferences

Documentation and Navigation Guide

Getting Started

• Installation and NuGet package setup
• WebAssembly vs Blazor Web App configuration
• Namespace imports and service registration
• Stylesheet and script resources
• Basic horizontal and vertical splitter implementation
• First render and initialization

Split Panes and Layouts

• Horizontal layout (default orientation)
• Vertical layout (Orientation.Vertical)
• Multiple panes configuration
• Separator customization (SeparatorSize)
• Nested splitter patterns
• Flex-based auto-sizing behavior
• Add and remove panes dynamically (AddPaneAsync, RemovePaneAsync)

Pane Configuration and Settings

• Pane sizing (fixed pixels, percentages, auto)
• Min/Max size constraints
• Visibility control (show/hide panes)
• Collapsible panes with toggle buttons
• Content templates and plain text
• Integrating other Blazor components

Events and Interactions

• Created event lifecycle
• OnResizeStart, Resizing, OnResizeStop events
• OnCollapse, OnExpand event handlers
• Collapsed, Expanded completion events
• Event args and callback structures
• Common event handling patterns

Resizing, Expand, and Collapse

• Resizing behavior and gripper element
• Prevent resizing (Resizable property)
• Min/Max size validation during resize
• Enable/disable collapsible panes
• Programmatic expand/collapse methods
• Initial collapsed state configuration
• Customize resize icons and cursors
• Separator template customization (custom HTML templates)

Styling and Theming

• Customize split bar appearance
• Style resize handles
• Customize resize arrows
• Hide/show resize handlers
• CSS class selectors for panes
• Theme integration (Bootstrap, Fluent, etc.)

State Management and Persistence

• Enable state persistence (EnablePersistence)
• Two-way data binding (@bind-Collapsed, @bind-Size)
• Save/restore pane sizes and collapsed states
• LocalStorage integration
• Binding pane properties to component state

Advanced Scenarios and Layouts

• Code editor style layout (nested horizontal + vertical)
• Outlook style layout with TreeView and ListView
• Dashboard and multi-panel layouts
• Performance optimization for complex layouts
• Nested splitters best practices
• Common troubleshooting and edge cases

Complete API Reference

• All SfSplitter properties, methods, and events
• SplitterPane property details
• Event arguments and handlers
• Complete code examples for each API
• Content property vs ContentTemplate comparison
• RTL, persistence, and advanced property usage

Quick Start Example

Horizontal Splitter with Two Panes

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="240px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="300px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Left Pane</h3>
                    <p>Content here</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Right Pane</h3>
                    <p>Content here</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Vertical Splitter with Collapse Buttons

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%" Orientation="Orientation.Vertical">
    <SplitterPanes>
        <SplitterPane Size="100px" Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">Top Pane</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">Bottom Pane</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Common Patterns

Pattern 1: Responsive Three-Pane Layout

<SfSplitter Height="400px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="20%" Min="150px" Collapsible="true">
            <ContentTemplate><div>Sidebar</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="60%" Min="300px">
            <ContentTemplate><div>Main Content</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="20%" Min="150px" Collapsible="true">
            <ContentTemplate><div>Details Panel</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

Pattern 2: Nested Splitters (Code Editor Layout)

<SfSplitter Height="400px" Orientation="Orientation.Vertical">
    <SplitterPanes>
        <SplitterPane Size="60%">
            <SfSplitter Height="100%">
                <SplitterPanes>
                    <SplitterPane Size="30%"><ContentTemplate>HTML</ContentTemplate></SplitterPane>
                    <SplitterPane Size="30%"><ContentTemplate>CSS</ContentTemplate></SplitterPane>
                    <SplitterPane Size="40%"><ContentTemplate>JS</ContentTemplate></SplitterPane>
                </SplitterPanes>
            </SfSplitter>
        </SplitterPane>
        <SplitterPane Size="40%"><ContentTemplate>Preview</ContentTemplate></SplitterPane>
    </SplitterPanes>
</SfSplitter>

Pattern 3: Collapsible Sidebar with State Binding

<SfSplitter Height="300px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="250px" Min="50px" Collapsible="true" @bind-Collapsed="@sidebarCollapsed">
            <ContentTemplate><div>Navigation</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Main Area</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private bool sidebarCollapsed = false;
}

Key Props and Configuration

Height

Width

Orientation

SeparatorSize

EnablePersistence

Size

Min

Max

Resizable

Collapsible

Visible

Collapsed

Common Use Cases

1. Code Editor Interface — Top panes for code tabs, bottom pane for output. Use nested horizontal splitters in top pane.
2. Admin Dashboard — Left sidebar for navigation, main area for content. Add right panel for details or settings.
3. Mail Client — Left pane for folder list, center for email list, right for email content.
4. Project Management Tool — Multiple collapsible panels for timeline, tasks, and gantt chart.
5. Data Analysis Dashboard — Resizable panels for charts, tables, and filters with state persistence.

• Start with Getting Started for setup instructions
• Read Split Panes to understand layout options
• Explore Pane Configuration for customization
• Check Advanced Scenarios for complex layouts