Splitter API

Full surface of the oge-splitter container, the declarative <oge-splitter-pane> child with its two-way collapsed model, and the config provider.

Properties Methods Events Types

OgeSplitter

oge-splitter

Properties 13

Panes & sizing

Name	Type	Default	Description
`panes`	`readonly OgeSplitterPaneData[] \| undefined`	—	Data-driven panes rendered after the projected `<oge-splitter-pane>` children.
`dataSource`	`DataSource<OgeSplitterPaneData> \| undefined`	—	Remote pane list, loaded through `@oge-ui/core`’s `DataSource` contract and merged after `panes`. A source that publishes `changes` triggers a reload.
`itemHoldTimeout`	`number`	`750`	Milliseconds a pointer must rest on a pane before `paneHold` fires.
`sizes`	`readonly OgeSplitterSize[] \| undefined`	—	Current pane sizes — two-way, and the whole persistable state. Setting it overrides the per-pane `size` inputs. Numbers are ratios; `'240px'` pins a pane.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Axis the panes are laid out along. Also drives which arrow keys move a separator.
`separatorSize`	`number`	`6`	Thickness of each separator in pixels — a real grid track, so it never eats into a pane.

Interaction

Name	Type	Default	Description
`resizable`	`boolean`	`true`	Pins every separator when `false`.
`step`	`number`	`5`	Share points one arrow-key press moves a separator.
`keyboardNavigation`	`boolean`	`true`	Enables Arrow / Home / End / Enter / Ctrl+Arrow on the separators. While off they also leave the Tab sequence.
`showCollapseGrips`	`boolean`	`true`	Renders an `aria-hidden` chevron on the separator for each collapsible neighbour — one for the pane before it, one for the pane after. The keyboard paths (Enter, Ctrl+Arrow) stay available either way.
`disabled`	`boolean`	`false`	Disables the whole splitter — no dragging, no keyboard, no collapsing.

Accessibility & text

Name	Type	Default	Description
`ariaLabel`	`string \| undefined`	—	Accessible name of the splitter container.
`messages`	`Partial<OgeSplitterMessages>`	`{}`	Per-instance overrides of the config strings, including the separators’ accessible names.

Methods 6

Name	Type	Description
`collapse(target)`	`(target: number \| string) => boolean`	Collapses a pane by index or key. Returns `false` when the pane is not collapsible or `paneCollapsing` vetoed it.
`expand(target)`	`(target: number \| string) => boolean`	Expands a collapsed pane, restoring the size it had when it collapsed and scaling its siblings back down to fit.
`toggle(target)`	`(target: number \| string) => boolean`	Collapses the pane if expanded, expands it otherwise.
`isCollapsed(target)`	`(target: number \| string) => boolean`	Whether a pane is currently collapsed.
`resize(separatorIndex, delta)`	`(separatorIndex: number, delta: number) => boolean`	Moves a separator by `delta` share points — the programmatic equivalent of an arrow key. `false` when that separator cannot move.
`focus(separatorIndex?)`	`(separatorIndex?: number) => void`	Focuses a separator, the first one by default.

Events 11

Name	Type	Description
`resizeStarted`	`OgeSplitterResizeStartEvent`	Emitted once when a drag or keyboard resize begins. The reference `onResizeStart`.
`resized`	`OgeSplitterResizeEvent`	Emitted every time the sizes change during a resize — once per pointer move. The reference `onResize`.
`resizeEnded`	`OgeSplitterResizeEvent`	Emitted once when the gesture finishes, after the sizes model has been published. The reference `onResizeEnd`.
`paneCollapsing`	`OgeSplitterPaneCollapsingEvent`	Cancelable pre-event of a pane collapsing — set `cancel = true` to block it.
`paneExpanding`	`OgeSplitterPaneCollapsingEvent`	Cancelable pre-event of a pane expanding.
`paneCollapsed`	`OgeSplitterPaneCollapsedEvent`	Emitted after a pane collapsed.
`paneExpanded`	`OgeSplitterPaneCollapsedEvent`	Emitted after a pane expanded.
`paneClick`	`OgeSplitterPaneClickEvent`	Emitted when a pane is clicked. A nested splitter reports its own panes — the event does not surface on the parent.
`paneHold`	`OgeSplitterPaneHoldEvent`	A pane was held for `itemHoldTimeout` — a touch long-press or a mouse hold.
`paneContextMenu`	`OgeSplitterPaneHoldEvent`	A pane was right-clicked or long-pressed for a menu.
`sizesChange`	`readonly OgeSplitterSize[] \| undefined`	Two-way model output of `sizes`.

Types 11

Types

Name	Type	Description
`OgeSplitterOrientation`	`'horizontal' \| 'vertical'`	Axis the panes are laid out along.
`OgeSplitterGripSide`	`'start' \| 'end'`	Which neighbour a separator's collapse grip acts on: `'start'` is the pane before it (the APG primary pane), `'end'` the one after.
`OgeSplitterSize`	`number \| string`	A number (or `'<n>%'`) is a ratio of the space the flexible panes share, so `[30, 30]` lays out like `[50, 50]`. `'<n>px'` pins the pane to a fixed track. Any other string is ignored with a dev-mode warning.
`OgeSplitterPaneData`	`interface`	Data-driven counterpart of a declarative pane: `key`, `size`, `minSize`, `maxSize`, `collapsible`, `collapsed`, `collapsedSize`, `resizable`, `scrollable`, `disabled`, `visible`, `text`, `cssClass`, `htmlAttributes`, `panes`, `orientation`.
`OgeSplitterPaneTemplateContext`	`interface`	Context of `[ogeSplitterPaneTemplate]`: `$implicit` (the pane entry), `index`, `collapsed`.
`OgeSplitterResizeStartEvent`	`interface`	`separatorIndex`, `sizes` at the start of the gesture, and the originating `event` (absent for a keyboard resize).
`OgeSplitterResizeEvent`	`interface`	`separatorIndex`, current `sizes`, `previousSizes` from the start of the gesture, and the originating `event`.
`OgeSplitterPaneCollapsingEvent`	`interface`	`index`, `key`, `item`, `event`, and a mutable `cancel` flag.
`OgeSplitterPaneCollapsedEvent`	`interface`	`index`, `key`, `item`, `event`.
`OgeSplitterPaneHoldEvent`	`interface`	Payload of `paneHold` and `paneContextMenu`: `index`, `key?`, `item?`, `event`.
`OgeSplitterPaneClickEvent`	`interface`	`index`, `key`, `item` and the originating `event`.

OgeSplitterPane

oge-splitter-pane

Properties 14

Name	Type	Default	Description
`key`	`string \| undefined`	—	Stable identity used by DOM ids and by the collapse API’s string targets.
`size`	`OgeSplitterSize \| undefined`	—	Initial size — a ratio number, `'40%'` or `'240px'`. Panes without one split whatever the sized ones leave.
`minSize`	`OgeSplitterSize \| undefined`	—	Smallest size a resize may leave this pane at. A pixel value also becomes the grid track’s floor.
`maxSize`	`OgeSplitterSize \| undefined`	—	Largest size a resize may grow this pane to.
`collapsible`	`boolean`	`false`	Allows the pane to be collapsed from its separator — Enter, the grip, or a double click.
`collapsed`	`boolean`	`false`	Collapsed state — two-way. Writes run the splitter’s pipeline, so a vetoed change reverts the binding.
`collapsedSize`	`OgeSplitterSize \| undefined`	`0`	Size the pane keeps while collapsed.
`resizable`	`boolean`	`true`	Pins the pane — both of its separators refuse to drag and report `aria-disabled`.
`scrollable`	`boolean`	`true`	Clips overflowing content instead of scrolling it when `false`.
`disabled`	`boolean`	`false`	Disabled panes cannot be collapsed and their separators are inert.
`visible`	`boolean`	`true`	Removes the pane entirely when `false`.
`text`	`string \| undefined`	—	Plain-text body, rendered when the pane has no projected content.
`htmlAttributes`	`Readonly<Record<string, string>> \| undefined`	—	Extra attributes on the pane element. Keys removed from the bag are removed from the DOM, so clearing it clears the element.
`cssClass`	`string \| undefined`	—	Extra class on the pane element.

Methods 3

Name	Type	Description
`collapse()`	`() => void`	Collapses this pane, subject to the splitter’s pipeline.
`expand()`	`() => void`	Expands this pane, subject to the splitter’s pipeline.
`toggle()`	`() => void`	Collapses the pane if expanded, expands it otherwise.

Events 1

Name	Type	Description
`collapsedChange`	`boolean`	Two-way model output of `collapsed`.

Types 1

Directives

Name	Type	Description
`OgeSplitterPaneTemplate`	`[ogeSplitterPaneTemplate]`	Structural directive rendering the body of every data-driven `panes` entry. Declarative children use their projected content instead.

Splitter configuration

Properties 5

Name	Type	Default	Description
`provideOgeSplitterConfig(config)`	`(config: OgeSplitterConfigInput) => Provider`	—	Application- or component-scoped defaults. `messages` is shallow-merged over the built-in strings.
`separatorSize`	`number \| undefined`	`6`	Default for the `separatorSize` input.
`step`	`number \| undefined`	`5`	Default for the `step` input.
`showCollapseGrips`	`boolean \| undefined`	`true`	Default for the `showCollapseGrips` input.
`messages`	`OgeSplitterMessages`	—	Every user-facing string: `separator` (with `{{first}}` / `{{second}}` placeholders), `collapsed`, `collapsePane`, `expandPane`, `noData`.

Types 6

Types

Name	Type	Description
`OgeSplitterConfig`	`interface`	Shape held by `OGE_SPLITTER_CONFIG`: `messages` plus the optional input defaults.
`OgeSplitterConfigInput`	`interface`	Argument of `provideOgeSplitterConfig()` — every field optional, `messages` partial.
`OgeSplitterMessages`	`interface`	Every user-facing string in the splitter, including the separators’ accessible names.
`OGE_SPLITTER_CONFIG`	`InjectionToken<OgeSplitterConfig>`	The token itself — inject it to read the effective defaults.
`OGE_DEFAULT_SPLITTER_CONFIG`	`OgeSplitterConfig`	The built-in defaults, exported for composition.
`OGE_DEFAULT_SPLITTER_MESSAGES`	`OgeSplitterMessages`	The built-in English strings.