sufi-blazor/docs/components/builder/SbSplitPane.md

SbSplitPane

A resizable split container that divides space between two panes. The divider can be dragged to adjust the split ratio.

Parameters

Parameter	Type	Default	Description
Orientation	SbSplitOrientation	Horizontal	Split direction
SplitPosition	double	50	Initial split position (percentage)
MinFirstPane	double	10	Minimum first pane size (percentage)
MinSecondPane	double	10	Minimum second pane size (percentage)
Collapsible	bool	false	Whether panes can be collapsed (reserved)
Class	string?	null	Additional CSS classes

Events

Event	Type	Description
SplitPositionChanged	EventCallback	Fired when split position changes

Templates / Slots

Slot	Type	Description
FirstPane	RenderFragment?	Content for the first (left/top) pane
SecondPane	RenderFragment?	Content for the second (right/bottom) pane

Orientation Options

Value	Description
Horizontal	Left/right split (vertical divider)
Vertical	Top/bottom split (horizontal divider)

CSS Classes

• sb-split-pane - Base class
• sb-split-pane--horizontal - Horizontal orientation
• sb-split-pane--vertical - Vertical orientation
• sb-split-pane__panel - Panel container
• sb-split-pane__panel--first - First panel
• sb-split-pane__panel--second - Second panel
• sb-split-pane__divider - Divider element
• sb-split-pane__divider--dragging - During resize
• sb-split-pane__divider-handle - Visual handle

Examples

Basic Horizontal Split

<SbSplitPane>
    <FirstPane>
        <div class="panel">Left Panel</div>
    </FirstPane>
    <SecondPane>
        <div class="panel">Right Panel</div>
    </SecondPane>
</SbSplitPane>

Vertical Split

<SbSplitPane Orientation="SbSplitOrientation.Vertical">
    <FirstPane>
        <div class="panel">Top Panel</div>
    </FirstPane>
    <SecondPane>
        <div class="panel">Bottom Panel</div>
    </SecondPane>
</SbSplitPane>

Custom Split Position

<SbSplitPane SplitPosition="30">
    <FirstPane>
        <div class="sidebar">Sidebar (30%)</div>
    </FirstPane>
    <SecondPane>
        <div class="main">Main Content (70%)</div>
    </SecondPane>
</SbSplitPane>

With Minimum Sizes

<SbSplitPane MinFirstPane="20" MinSecondPane="30">
    <FirstPane>
        <div class="panel">Min 20%</div>
    </FirstPane>
    <SecondPane>
        <div class="panel">Min 30%</div>
    </SecondPane>
</SbSplitPane>

Controlled Split Position

<SbSplitPane SplitPosition="@splitPosition"
             SplitPositionChanged="@(v => splitPosition = v)">
    <FirstPane>
        <div class="panel">First (@splitPosition.ToString("F0")%)</div>
    </FirstPane>
    <SecondPane>
        <div class="panel">Second (@((100 - splitPosition).ToString("F0"))%)</div>
    </SecondPane>
</SbSplitPane>

<SbButton OnClick="() => splitPosition = 50">Reset to 50/50</SbButton>

@code {
    private double splitPosition = 50;
}

IDE-Style Layout

<div class="ide-layout">
    <SbSplitPane SplitPosition="20" MinFirstPane="15" MinSecondPane="50">
        <FirstPane>
            <SbInspectorPanel Title="Explorer">
                <SbTreeView Items="@files" />
            </SbInspectorPanel>
        </FirstPane>
        <SecondPane>
            <SbSplitPane Orientation="SbSplitOrientation.Vertical" 
                         SplitPosition="70">
                <FirstPane>
                    <div class="editor">
                        Code Editor Area
                    </div>
                </FirstPane>
                <SecondPane>
                    <SbTabs>
                        <SbTab Title="Terminal">Terminal output...</SbTab>
                        <SbTab Title="Problems">No problems detected</SbTab>
                        <SbTab Title="Output">Build output...</SbTab>
                    </SbTabs>
                </SecondPane>
            </SbSplitPane>
        </SecondPane>
    </SbSplitPane>
</div>

Nested Splits

<SbSplitPane SplitPosition="25">
    <FirstPane>
        <nav class="left-sidebar">Navigation</nav>
    </FirstPane>
    <SecondPane>
        <SbSplitPane SplitPosition="75">
            <FirstPane>
                <main class="content">Main Content</main>
            </FirstPane>
            <SecondPane>
                <aside class="right-sidebar">Details Panel</aside>
            </SecondPane>
        </SbSplitPane>
    </SecondPane>
</SbSplitPane>

Email Client Layout

<SbSplitPane SplitPosition="30">
    <FirstPane>
        <div class="email-list">
            @foreach (var email in emails)
            {
                <div class="email-item" @onclick="() => SelectEmail(email)">
                    <strong>@email.Subject</strong>
                    <span>@email.From</span>
                </div>
            }
        </div>
    </FirstPane>
    <SecondPane>
        @if (selectedEmail != null)
        {
            <div class="email-content">
                <h2>@selectedEmail.Subject</h2>
                <p>From: @selectedEmail.From</p>
                <SbDivider />
                <div>@selectedEmail.Body</div>
            </div>
        }
        else
        {
            <SbEmptyState Title="No email selected" />
        }
    </SecondPane>
</SbSplitPane>