HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
SplitterView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorTwo panes and a divider the reader can move.ExperimentalSince 0.1.0LayoutUsageimport'@fusion.dev/helix/splitter'import'@fusion.dev/helix-headless/splitter'Preview
API ReferenceRoothelix-splitterTwo panes and a divider the reader can move.
PropTypeDefaultDescriptioncollapsed"end"|"start"Which pane is shut, if either.collapsedSizenumber0How much of a shut pane is still shown, as a percentage.cornerLabelstring"Resize both"Accessible name for the handle where two dividers cross.defaultCollapsed"end"|"start"Which pane starts shut, where nothing declared it.defaultPositionnumber50Where the divider starts, where nothing declared it.labelstring"Resize panes"Accessible name for the divider.maxnumber|string100Nearest it may come to the end, on the same terms as `min`.minnumber|string0Nearest the divider may come to the start.orientation"auto"|"horizontal"|"vertical"Which way the panes are laid out.positionnumberWhere the divider sits, as a percentage of the whole.stepnumber2How far one arrow press moves it, as a percentage.variant"grip"|"line"Whether the divider carries a grip.
ReadTypeDescriptionverticalbooleanPublic because a nested splitter compares axes with the one it is in.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionendThe pane after it.startThe pane before the divider.
EventTypeDescriptionhelix-before-collapseHelixBeforeCollapseEventFired before a pane shuts or reopens, and cancelable.helix-before-resizeHelixBeforeResizeEventFired before the divider settles, and cancelable.
MethodTypeDescriptioncross(by: HelixHeadlessSplitter, at: number) => voidRecords that a nested splitter crosses this one at `at` percent along it.moveTo(next: number, settled: unknown) => voidMoves the divider, and optionally says so.uncross(by: HelixHeadlessSplitter) => voidForgets a nested splitter that has left the tree. See `cross`.
PartDescriptioncornerThe handle where a nested splitter's divider crosses this one.endThe box holding the second.separatorThe divider itself.startThe box holding the first pane.
CSS PropertyDescription--splitter-colorThe line between the panes.--splitter-cornerHow wide the handle at a crossing is.--splitter-corner-atWhere a nested splitter crosses this one, as a percentage.--splitter-drag-colorThe line while it is being moved.--splitter-grip-colorThe grip beside the line, once it is shown.--splitter-grip-lengthHow far the grip runs along the divider.--splitter-hover-colorThe target under the pointer.--splitter-positionWhere the divider sits, as a percentage of the box.--splitter-targetHow wide the draggable box is.
Roothelix-headless-splitterTwo panes and a divider the reader can move.
PropTypeDefaultDescriptioncollapsed"end"|"start"Which pane is shut, if either.collapsedSizenumber0How much of a shut pane is still shown, as a percentage.cornerLabelstring"Resize both"Accessible name for the handle where two dividers cross.defaultCollapsed"end"|"start"Which pane starts shut, where nothing declared it.defaultPositionnumber50Where the divider starts, where nothing declared it.labelstring"Resize panes"Accessible name for the divider.maxnumber|string100Nearest it may come to the end, on the same terms as `min`.minnumber|string0Nearest the divider may come to the start.orientation"auto"|"horizontal"|"vertical"Which way the panes are laid out.positionnumberWhere the divider sits, as a percentage of the whole.stepnumber2How far one arrow press moves it, as a percentage.
ReadTypeDescriptionverticalbooleanPublic because a nested splitter compares axes with the one it is in.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionendThe pane after it.startThe pane before the divider.
EventTypeDescriptionhelix-before-collapseHelixBeforeCollapseEventFired before a pane shuts or reopens, and cancelable.helix-before-resizeHelixBeforeResizeEventFired before the divider settles, and cancelable.
MethodTypeDescriptioncross(by: HelixHeadlessSplitter, at: number) => voidRecords that a nested splitter crosses this one at `at` percent along it.moveTo(next: number, settled: unknown) => voidMoves the divider, and optionally says so.uncross(by: HelixHeadlessSplitter) => voidForgets a nested splitter that has left the tree. See `cross`.
PartDescriptioncornerThe handle where two dividers cross, added on the client.endThe box holding the second.separatorThe divider itself.startThe box holding the first pane.
CSS PropertyDescription--splitter-corner-atWhere a nested splitter crosses this one, as a percentage.--splitter-positionWhere the divider sits, as a percentage of the box.
ExamplesNameDescriptionBoundsWhere the divider may go, how far each nudge moves it, and a pane folded away.CollapsedA pane collapsed to a sliver, and the handle that brings it back.ColumnsThree panes across, which is two splitters nested.ControlledA divider the page owns, answering the event and assigning `position` and `collapsed`.EventsOne gesture, two facts, and each says which one it is.GripA divider with a visible grip rather than a bare rule.NestedA splitter inside a pane of another, which is how a workbench is built.PreviewTwo panes and a divider a pointer or an arrow key can move.PreviewTwo panes and a divider a pointer or an arrow key can move.VerticalPanes stacked, with the divider between them.WorkbenchThe arrangement an editor uses: a tree, a document and a panel.