Splitter

Put content in FirstPanel and SecondPanel and name the gutter with AriaLabel. Drag the gutter, or focus it and use the arrow keys; a double-click puts it back. Each panel scrolls its own content.

Vertical stacks the panels: the first one is on top, sizes become heights and the up and down arrows move the gutter.

FirstPanelSize or SecondPanelSize pins one panel in pixels while the other takes the rest. The MinSize and MaxSize of each panel bound the gutter for the pointer, the keyboard and Percent alike - and so does a min or max size set in CSS through Styles or Classes, in any unit.

Percent is the first panel's share of the splitter, 0 to 100. It keeps its proportion when the container resizes, binds both ways, and wins over the panel sizes while it has a value. Set one way, it is the page's to hold; DefaultPercent only sets where the split starts and resets to.

DragStep lands the split on a pixel grid - a column, a tile, a line of text - for the pointer and the keyboard alike. LazyResize drags a line instead of the panels and lays them out once, on release - for content too heavy to lay out on every frame, such as a large grid, an editor or a chart.

GutterSize sets the thickness of the gutter. However thin it is, a press is caught up to GutterHitSize (24px, 44px on touch) without taking room from the panels. GutterIconName draws an icon on it and GutterTemplate any decoration - nothing focusable, the gutter itself is the control.

Collapsible lets the first panel fold away: Enter or Ctrl + arrow on the gutter, or a drag into the edge. Press the folded gutter to open it again, back at its old size. Collapsed binds, CollapsedSize leaves a strip of the panel showing, SnapSize sets how close to the edge a drag must end to fold, and CollapseSecondPanel folds the second panel instead.

ShowCollapseButton puts the fold on the gutter where the pointer can see it. The chevron follows the orientation, the folding side and the writing direction; CollapseIconName and ExpandIconName (or CollapseIcon and ExpandIcon) replace it. The keys on the gutter already do the same, so the button stays out of the tab order.

OnCollapsing runs before the panel folds or opens, with IsCollapsing and the Reason. Set Cancel to leave the panel as it is; the callback is awaited, so it can wait for a confirmation.

Nothing has been folded yet.

OnResizeStart is followed by exactly one of OnResizeEnd and OnResizeCancel (Escape, or the browser taking the pointer away); all carry the first panel's share. OnResize reports every frame of a drag - leave it unset when only the result matters, and no calls are made while dragging. OnCollapsedChange reports folds, and OnGutterDoubleClick double-clicks.

No resize yet.

NoResetOnDoubleClick turns off the built-in reset, so the double-click can do something else - here, split the panels evenly:

From a reference: SetPercent, GetPercent (measured, so it answers before any drag), ResetSize, Collapse, Expand, ToggleCollapse (not limited by Collapsible) and FocusAsync. A Percent or Collapsed the page binds one way stays the page's.

Nothing has been measured yet.

PersistKey remembers the position and the fold in local storage - or session storage, with PersistInSessionStorage - and restores them on the next visit. Use one key per splitter. Move the gutter below and reload the page.

ReadOnly locks the split and keeps the look; Disabled locks it and dims the splitter. Either way the gutter leaves the tab order and becomes a plain separator; the methods still work.

Splitters nest in either direction to build multi-pane layouts; each keeps its own sizes, limits, gutter and state.

The gutter follows the WAI-ARIA window splitter pattern: one tab stop, a separator named by AriaLabel that controls the first panel and reports its share, within the range the panel's limits (and a fold) allow.

• Arrow keys move it by KeyboardStep pixels (10 by default); Shift + arrow, Page Up and Page Down by ten steps.
• Home and End take it to the smallest and largest size the panels allow.
• Enter, or Ctrl + the arrow towards or away from the folding panel, folds and opens it.
• Escape cancels a drag in progress.

A panel folded to 0px is made inert, so Tab never lands in content that is off the screen. Fold the panel below and tab through: the button inside it is skipped.

A drag needs a single-pointer alternative (WCAG 2.5.7): the collapse button and the double-click are one, and controls of the page's own driving Percent are another.

BitParams hands a BitSplitterParams to every splitter under it, so a layout sets the shared look and behavior once. The values are defaults: a splitter keeps whatever it sets itself. The panels, Percent, Collapsed, PersistKey and the callbacks stay per instance.

Use icons from external libraries like FontAwesome and Bootstrap Icons with the GutterIcon parameter (BitIconInfo).

FontAwesome:

Bootstrap:

Style and Class dress the root - where the height goes. Styles and Classes reach the parts: the panels, the gutter, its grip or icon, the collapse button and its icon, and the lazy drag's line. The public --bit-Splitter-* CSS variables restyle every state at once, from a splitter's Style, a wrapper or :root.

Component's Style & Class:

Styles & Classes:

CSS variables:

In a right-to-left splitter - by Dir or by a dir on any ancestor - the first panel is on the right; dragging the gutter left, or the arrow key pointing away from the panel, makes it bigger, and the collapse chevron turns with it.