A splitter component that provides a resizable split-pane layout, dividing the view into two panels - start and end - separated by a draggable bar.
Panels can be resized by dragging the bar, using keyboard shortcuts, or collapsed/expanded
using the built-in collapse buttons or the programmatic toggle() API.
Nested splitters are supported for more complex layouts.
- Slots
-
start— Content projected into the start (left/top) panel. -
end— Content projected into the end (right/bottom) panel.
- CSS Parts
-
splitter-bar— The resizable bar element between the two panels. -
drag-handle— The drag handle icon/element on the splitter bar. -
start-pane— The container for the start panel content. -
end-pane— The container for the end panel content. -
start-collapse-btn— The button to collapse the start panel. -
end-collapse-btn— The button to collapse the end panel. -
start-expand-btn— The button to expand the start panel when collapsed. -
end-expand-btn— The button to expand the end panel when collapsed.
Properties
Section titled "Properties"disableCollapse
Section titled "disableCollapse"Whether collapsing either pane is disabled. When true, this also hides
the expand/collapse buttons on the splitter bar.
disableCollapse: booleandisableResize
Section titled "disableResize"Whether resizing the panes by dragging the splitter bar or using keyboard
shortcuts is disabled. When true, this also hides the drag handle on the
splitter bar.
disableResize: booleanendCollapsed
Section titled "endCollapsed"Whether the end pane is currently collapsed. Set this property to collapse or expand the pane programmatically.
endCollapsed: booleanendMaxSize
Section titled "endMaxSize"The maximum size of the end pane.
Accepts a CSS length with an explicit unit, e.g. 500px or 80%, or a
unitless 0. Setting auto, any other unitless or unparsable value, a
negative value, or a percentage above 100 removes the constraint.
endMaxSize: string | undefinedendMinSize
Section titled "endMinSize"The minimum size of the end pane.
Accepts a CSS length with an explicit unit, e.g. 100px or 20%, or a
unitless 0. Setting auto, any other unitless or unparsable value, a
negative value, or a percentage above 100 removes the constraint.
endMinSize: string | undefinedendSize
Section titled "endSize"The size of the end pane.
Accepts a CSS length with an explicit unit, e.g. 200px or 50%, or a
unitless 0. Setting auto, any other unitless or unparsable value, a
negative value, or a percentage above 100 falls back to automatic sizing.
endSize: string | undefinedhideCollapseButtons
Section titled "hideCollapseButtons"Whether the expand/collapse buttons on the splitter bar are hidden.
Note that the buttons will also be hidden if disable-collapse is true or
if a pane is currently collapsed.
hideCollapseButtons: booleanhideDragHandle
Section titled "hideDragHandle"Whether the drag handle on the splitter bar is hidden.
Note that the drag handle will also be hidden if disable-resize is true.
hideDragHandle: booleanorientation
Section titled "orientation"The orientation of the splitter, which determines the direction of resizing and collapsing.
Changing the orientation after the initial render clears the pane sizes and their min/max constraints, along with the corresponding attributes - a size authored for one axis rarely makes sense on the other.
orientation: SplitterOrientationstartCollapsed
Section titled "startCollapsed"Whether the start pane is currently collapsed. Set this property to collapse or expand the pane programmatically.
startCollapsed: booleanstartMaxSize
Section titled "startMaxSize"The maximum size of the start pane.
Accepts a CSS length with an explicit unit, e.g. 500px or 80%, or a
unitless 0. Setting auto, any other unitless or unparsable value, a
negative value, or a percentage above 100 removes the constraint.
startMaxSize: string | undefinedstartMinSize
Section titled "startMinSize"The minimum size of the start pane.
Accepts a CSS length with an explicit unit, e.g. 100px or 20%, or a
unitless 0. Setting auto, any other unitless or unparsable value, a
negative value, or a percentage above 100 removes the constraint.
startMinSize: string | undefinedstartSize
Section titled "startSize"The size of the start pane.
Accepts a CSS length with an explicit unit, e.g. 200px or 50%, or a
unitless 0. Setting auto, any other unitless or unparsable value, a
negative value, or a percentage above 100 falls back to automatic sizing.
startSize: string | undefinedMethods
Section titled "Methods"disconnectedCallback
Section titled "disconnectedCallback"Invoked when the component is removed from the document's DOM.
This callback is the main signal to the element that it may no longer be
used. disconnectedCallback() should ensure that nothing is holding a
reference to the element (such as event listeners added to nodes external
to the element), so that it is free to be garbage collected.
``
An element may be re-connected after being disconnected.
disconnectedCallback(): voidReturns void
toggle
Section titled "toggle"Toggles the collapsed state of the specified pane.
Does not emit igcLayoutChanged - that event reports user-driven changes,
and a programmatic call is already known to the caller.
toggle(position: PanePosition): voidParameters
- position:
PanePosition
Returns void
Events
Section titled "Events"onLayoutChanged
Section titled "onLayoutChanged"Emitted after a user
onLayoutChanged(args: CustomEvent<IgrSplitterLayoutChangedEventArgs>): voidParameters
Returns void
onResizeEnd
Section titled "onResizeEnd"Emitted once when a resize operation completes.
onResizeEnd(args: CustomEvent<IgrSplitterResizeEventArgs>): voidParameters
Returns void
onResizeStart
Section titled "onResizeStart"Emitted once when a resize operation begins (pointer drag or keyboard).
onResizeStart(args: CustomEvent<IgrSplitterResizeEventArgs>): voidParameters
Returns void
onResizing
Section titled "onResizing"Emitted continuously while a pane is being resized.
onResizing(args: CustomEvent<IgrSplitterResizeEventArgs>): void