SplitLayout
Composes two labeled, persisted resizable panes that retain one content owner while stacking in a narrow container.@gemologic/sheen-patterns · patternsPlayground
<SplitLayout label="Editor" startLabel="Source" endLabel="Preview" handleLabel="Resize source and preview" defaultSizes={[0.4, 0.6]} start={<textarea aria-label="Source draft" />} end={<article>Preview</article>} narrowLayout="stack" orientation="horizontal"/>Variant matrix
Source and previewPreview
orientation: horizontalPreview
orientation: verticalPreview
narrowLayout: stackPreview
narrowLayout: splitPreview
Anatomy
- Package
@gemologic/sheen-patterns- Source
packages/patterns/src/SplitLayout.tsx- Tokens
--sheen-color-bg--sheen-color-bg-raised--sheen-color-border--sheen-color-border-control--sheen-color-focus-ring--sheen-color-focus-ring-offset
Accessibility
Role: named group containing two named scroll regions and an adjustable separatorKeyboard: Tab focuses each pane and the separator, Arrow keys resize the focused separator, Home and End move it to its boundsDo
- Provide server-known initial sizes and let the application persistence adapter save accepted changes.
- Keep both content slots mounted while refreshing or crossing the narrow breakpoint.
Do not
- Do not read storage on mount and replace server geometry.
- Do not create a second mobile content tree.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Accessible name for the complete split workspace. |
startLabel * | string | — | Accessible name for the logical start pane's scroll region. |
endLabel * | string | — | Accessible name for the logical end pane's scroll region. |
handleLabel * | string | — | Accessible name for the adjustable separator. |
start * | JSX.Element | — | Persistent logical start-pane content. |
end * | JSX.Element | — | Persistent logical end-pane content. |
orientation | "horizontal" | "vertical" | horizontal | Horizontal side-by-side or vertical stacked split axis. |
narrowLayout | "stack" | "split" | stack | Stacks a horizontal split below the component container breakpoint or retains resizing. |
sizes | readonly number[] | — | Controlled two-pane fractions summing to one. |
defaultSizes | readonly number[] | — | Deterministic initial two-pane fractions summing to one. |
onSizesChange | (sizes: readonly number[]) => void | — | Receives validated immutable fractions after pointer or keyboard resizing. |
keyboardStep | number | 0.05 | Fraction moved by each separator arrow-key action. |
persistence | ResizablePersistence | — | App-owned server-known initial sizes, async save adapter, and explicit failure callback. |
startMinSize | number | 0.2 | Minimum logical start-pane fraction. |
startMaxSize | number | — | Maximum logical start-pane fraction. |
endMinSize | number | 0.2 | Minimum logical end-pane fraction. |
endMaxSize | number | — | Maximum logical end-pane fraction. |
refreshing | boolean | false | Marks retained accepted content busy without hiding or replacing either pane. |