SplitPane

A resizable two-panel layout. Drag the divider to resize the panels. Keyboard accessible via arrow keys (10 px step, Shift = 50 px). The first-pane size is persisted in localStorage between page loads. On mobile (≤ 768 px) the divider is hidden and the panes stack vertically. Default: horizontal orientation.

Horizontal Split (default)

Left pane has a minimum of 120 px, maximum of 400 px, and opens at 220 px.

Left pane

Drag the divider to resize. This pane will not shrink below 120 px or grow past 400 px.

Right pane

The right pane takes all remaining space.

Vertical Split

Top pane resizes vertically. Minimum 80 px, maximum 200 px, default 120 px.

Top pane

Drag the horizontal bar to resize.

Bottom pane

The bottom pane takes all remaining space.

JS API — get/set/reset

Use m.splitPane(id) to programmatically read or write the first-pane size, or reset to the initial value.

Resizable pane

Content pane

// Horizontal split (default direction)
<?= $m->splitPane('mySplit')
    ->initialSize(220)
    ->minSize(120)
    ->maxSize(400)
    ->first('<div>Left pane content</div>')
    ->second('<div>Right pane content</div>') ?>

// Vertical split
<?= $m->splitPane('vertSplit')
    ->direction('vertical')
    ->initialSize(180)
    ->minSize(80)
    ->maxSize(300)
    ->first('<div>Top pane content</div>')
    ->second('<div>Bottom pane content</div>') ?>

// Get the current first-pane size in pixels
var sp = m.splitPane('mySplit');
var px = sp.getSize(); // returns current width (horizontal) or height (vertical)

// Set a specific size
sp.setSize(300);

// Reset to the initial size (data-initial-size attribute)
sp.reset();

// Listen for resize events
document.getElementById('mySplit').addEventListener('m:splitpane:resize', function (e) {
    console.log('New size:', e.detail.size, 'px');
});

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->splitPane($id)`	`string $id`	Create a SplitPane component.
`->first($html)`	`string $html`	HTML content for the first (left / top) pane.
`->second($html)`	`string $html`	HTML content for the second (right / bottom) pane.
`->direction($dir)`	`string 'horizontal'\|'vertical'`	Split direction. Default: `'horizontal'`.
`->initialSize($px)`	`int $px`	Starting width (horizontal) or height (vertical) of the first pane in pixels. Default: `300`.
`->minSize($px)`	`int $px`	Minimum first-pane size in pixels. Default: none.
`->maxSize($px)`	`int $px`	Maximum first-pane size in pixels. Default: none.

JS JS Methods

Method / Property	Parameters	Description
`m.splitPane(id)`	`string id`	Get the SplitPane API object for the given element id.
`sp.getSize()`		Returns the current first-pane size in pixels.
`sp.setSize(px)`	`number px`	Programmatically set the first-pane size (clamped to min/max).
`sp.reset()`		Reset the first pane to its `data-initial-size` value and clear localStorage.

EVENT Events

Event Name	Detail	Description
`m:splitpane:resize`	`{ size: number }`	Fired on the SplitPane root element whenever the divider is moved or the size is changed programmatically.