First panel

Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.

Second panel

Each word carried meaning, each pause brought understanding. The spaces here are open for growth.

``` \n**Vertical**: ```razor

First panel

Second panel

``` \n**Size & limits**: ```razor

Starts at 200px, stays between 120px and 320px.

Never narrower than 100px.

Takes the rest, never under 30% (CSS).

Starts at 150px.

``` \n**Percent**: ```razor

First panel

Second panel

Starts at 30%, free to move, double-click to go back.

Second panel

``` ```csharp private double? percent = 30; private double PercentValue { get => percent ?? 50; set => percent = value; } ``` \n**Dragging**: ```razor

Stops every @dragStep pixels

@(lazyResize ? "A line moves first; the panels follow when you let go." : "The panels follow the pointer.")

``` ```csharp private double dragStep = 50; private bool lazyResize; ``` \n**Gutter**: ```razor

GutterSize

Second panel

A 1px hairline, grabbed anywhere within 16px

Second panel

GutterIconName

Second panel

GutterTemplate

Second panel

``` ```csharp private double gutterSize = 10; ``` \n**Collapsible**: ```razor

A panel that folds away

Collapsed: @isCollapsed

Folds only when dragged within 40px of the edge.

Second panel

A document that takes the whole splitter once the inspector is away

An inspector that folds to the end

``` ```csharp private bool isCollapsed; ``` \n**Collapse button**: ```razor

Press the chevron to fold this away.

Second panel

A stacked splitter folds upwards.

Second panel

CollapseIconName and ExpandIconName

An inspector with icons of its own

``` \n**Cancelling a collapse**: ```razor

Folds away only with permission

Second panel

@collapseLog

``` ```csharp private bool allowCollapse = true; private string collapseLog = "Nothing has been folded yet."; ``` \n**Events**: ```razor

First panel

Second panel

@resizeLog

Double-click the gutter

to split evenly.

``` ```csharp private string resizeLog = "No resize yet."; private double? evenPercent; ``` \n**Programmatic control**: ```razor 25% 50% 75% Toggle collapse Reset Focus the gutter Measure

First panel

Second panel

@(measured is null ? "Nothing has been measured yet." : $"The first panel takes up {measured:F1}% of the splitter.")

``` ```csharp private double? measured; private BitSplitter splitterRef = default!; ``` \n**Persistence**: ```razor

Where you left it

Second panel

``` \n**Read-only & disabled**: ```razor

Read-only

The gutter stays where it is.

Disabled

The whole splitter is dimmed.

``` \n**Nested**: ```razor

Sidebar

Editor

Preview

Terminal

``` \n**Accessibility**: ```razor Narrower Wider

In the folding panel

One arrow key moves the gutter 50px.

``` ```csharp private double? a11yPercent = 30; ``` \n**Cascading parameters**: ```razor

From the cascade

Second panel

No collapse button of its own

Second panel

Outside the cascade

Second panel

``` ```csharp private readonly BitSplitterParams[] splitterParams = [ new() { GutterSize = 12, Collapsible = true, ShowCollapseButton = true, CollapsedSize = 8, FirstPanelSize = 160, } ]; ``` \n**External Icons**: ```razor

First panel

"fa-solid fa-arrows-left-right"

First panel

BitIconInfo.Css("fa-solid fa-grip-vertical")

First panel

BitIconInfo.Fa("solid grip-lines-vertical")

First panel

GutterIcon=@@("bi bi-grip-vertical")

First panel

BitIconInfo.Bi("arrow-left-right")

``` \n**Style & Class**: ```razor

Style

Second panel

Class

Second panel

Styles

Second panel

Classes

Second panel

One splitter's Style

Hover and drag the gutter

Set on a wrapper,

the variables reach

every splitter inside it.

``` \n**RTL**: ```razor

پنل اول

پنل دوم

```