The igc-splitter component provides a resizable split-pane layout that divides 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"

When true, prevents the user from collapsing either pane. This also hides the expand/collapse buttons on the splitter bar.

 
disableCollapse: boolean

disableResize

Section titled "disableResize"

When true, prevents the user from resizing the panes by dragging the splitter bar or using keyboard shortcuts. This also hides the drag handle on the splitter bar.

 
disableResize: boolean

endMaxSize

Section titled "endMaxSize"

The maximum size of the end pane.

 
endMaxSize: string

endMinSize

Section titled "endMinSize"

The minimum size of the end pane.

 
endMinSize: string

endSize

Section titled "endSize"

The size of the end pane.

 
endSize: string

hideCollapseButtons

Section titled "hideCollapseButtons"

When true, hides the expand/collapse buttons on the splitter bar.

Note that the buttons will also be hidden if disable-collapse is true or if a pane is currently collapsed.

 
hideCollapseButtons: boolean

hideDragHandle

Section titled "hideDragHandle"

When true, hides the drag handle on the splitter bar.

Note that the drag handle will also be hidden if disable-resize is true.

 
hideDragHandle: boolean

orientation

Section titled "orientation"

The orientation of the splitter, which determines the direction of resizing and collapsing.

 
orientation: SplitterOrientation

startMaxSize

Section titled "startMaxSize"

The maximum size of the start pane.

 
startMaxSize: string

startMinSize

Section titled "startMinSize"

The minimum size of the start pane.

 
startMinSize: string

startSize

Section titled "startSize"

The size of the start pane.

 
startSize: string

Methods

Section titled "Methods"

toggle

Section titled "toggle"

Toggles the collapsed state of the specified pane.

toggle(position: PanePosition): void

Parameters

  • position: PanePosition

Returns void

Events

Section titled "Events"

onResizeEnd

Section titled "onResizeEnd"

Emitted once when a resize operation completes.

onResizeEnd(args: CustomEvent<IgrSplitterResizeEventArgs>): void

Parameters

Returns void

onResizeStart

Section titled "onResizeStart"

Emitted once when a resize operation begins (pointer drag or keyboard).

onResizeStart(args: CustomEvent<IgrSplitterResizeEventArgs>): void

Parameters

Returns void

onResizing

Section titled "onResizing"

Emitted continuously while a pane is being resized.

onResizing(args: CustomEvent<IgrSplitterResizeEventArgs>): void

Parameters

Returns void