Split Pane

Basics

A .canon-split-pane: a pane, a handle and a pane. The handle is a separator people can move: role="separator", tabindex="0", named, aria-controls the first pane, its size in percent (aria-valuenow) between aria-valuemin and aria-valuemax. Drag it, or focus it and use the arrows (Shift for bigger steps), Home and End for the limits, Enter to fold the first pane to its minimum and back. A double click goes back to where it started. Each pane scrolls on its own.

Resize it to see canon-resize.

One over the other

A horizontal handle (aria-orientation="horizontal") stacks the panes: a query over its results. The arrows are Up and Down.

SELECT number, customer, due, amount
FROM invoices
WHERE status = 'overdue'
ORDER BY due;

Three panes

A pane can be a Split Pane itself: a list beside a record with its activity under it.

Edge cases

Right to left, the first pane is on the right and Left grows it. The limits keep each pane usable: here the list is between 20% and 60%.