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.
Element
igc-splitter
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.

Example

<!-- Basic horizontal splitter -->
<igc-splitter>
  <div slot="start">Start panel</div>
  <div slot="end">End panel</div>
</igc-splitter>

Constructors

Section titled "Constructors"

IgcSplitterComponent 

new IgcSplitterComponent(): IgcSplitterComponent

Defined in src/components/splitter/splitter.ts:340

Returns IgcSplitterComponent

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 = false

Defined in src/components/splitter/splitter.ts:209

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 = false

Defined in src/components/splitter/splitter.ts:219

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 = false

Defined in src/components/splitter/splitter.ts:235

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 = false

Defined in src/components/splitter/splitter.ts:250

orientation

Section titled "orientation"

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

 
orientation: SplitterOrientation = 'horizontal'

Defined in src/components/splitter/splitter.ts:199

styles

Section titled "styles" 
styles: CSSResult[]

Defined in src/components/splitter/splitter.ts:138

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

 
tagName: "igc-splitter" = 'igc-splitter'

Defined in src/components/splitter/splitter.ts:137

Accessors

Section titled "Accessors"

endMaxSize

Section titled "endMaxSize" 
get endMaxSize(): string | undefined

Defined in src/components/splitter/splitter.ts:304

Returns string | undefined

The maximum size of the end pane.

 
set endMaxSize(value: string | undefined): void

Defined in src/components/splitter/splitter.ts:300

Parameters

  • value: string | undefined

Returns void

endMinSize

Section titled "endMinSize" 
get endMinSize(): string | undefined

Defined in src/components/splitter/splitter.ts:276

Returns string | undefined

The minimum size of the end pane.

 
set endMinSize(value: string | undefined): void

Defined in src/components/splitter/splitter.ts:272

Parameters

  • value: string | undefined

Returns void

endSize

Section titled "endSize" 
get endSize(): string | undefined

Defined in src/components/splitter/splitter.ts:332

Returns string | undefined

The size of the end pane.

 
set endSize(value: string | undefined): void

Defined in src/components/splitter/splitter.ts:328

Parameters

  • value: string | undefined

Returns void

startMaxSize

Section titled "startMaxSize" 
get startMaxSize(): string | undefined

Defined in src/components/splitter/splitter.ts:290

Returns string | undefined

The maximum size of the start pane.

 
set startMaxSize(value: string | undefined): void

Defined in src/components/splitter/splitter.ts:286

Parameters

  • value: string | undefined

Returns void

startMinSize

Section titled "startMinSize" 
get startMinSize(): string | undefined

Defined in src/components/splitter/splitter.ts:262

Returns string | undefined

The minimum size of the start pane.

 
set startMinSize(value: string | undefined): void

Defined in src/components/splitter/splitter.ts:258

Parameters

  • value: string | undefined

Returns void

startSize

Section titled "startSize" 
get startSize(): string | undefined

Defined in src/components/splitter/splitter.ts:318

Returns string | undefined

The size of the start pane.

 
set startSize(value: string | undefined): void

Defined in src/components/splitter/splitter.ts:314

Parameters

  • value: string | undefined

Returns void

Methods

Section titled "Methods"

addEventListener

Section titled "addEventListener"

Inherited from: EventEmitterMixin< IgcSplitterComponentEventMap, Constructor<LitElement> >(LitElement) 

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:7

Parameters

  • type: K
  • listener: object
  • options: boolean | AddEventListenerOptions

Returns void

emitEvent

Section titled "emitEvent"

Inherited from: EventEmitterMixin< IgcSplitterComponentEventMap, Constructor<LitElement> >(LitElement) 

emitEvent(type: K, eventInitDict: CustomEventInit<D>): boolean

Defined in src/components/common/mixins/event-emitter.ts:30

Parameters

  • type: K
  • eventInitDict: CustomEventInit<D>

Returns boolean

removeEventListener

Section titled "removeEventListener"

Inherited from: EventEmitterMixin< IgcSplitterComponentEventMap, Constructor<LitElement> >(LitElement) 

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:17

Parameters

  • type: K
  • listener: object
  • options: boolean | EventListenerOptions

Returns void

toggle

Section titled "toggle"

Toggles the collapsed state of the specified pane.

 
toggle(position: PanePosition): void

Defined in src/components/splitter/splitter.ts:461

Parameters

  • position: PanePosition

Returns void

register

Section titled "register" 
register(): void

Defined in src/components/splitter/splitter.ts:141

Returns void

Events

Section titled "Events"

igcResizeEnd

Section titled "igcResizeEnd" 
igcResizeEnd: CustomEvent<IgcSplitterResizeEventArgs>

Defined in src/components/splitter/types.ts:46

Example

<!-- Basic horizontal splitter -->
<igc-splitter>
  <div slot="start">Start panel</div>
  <div slot="end">End panel</div>
</igc-splitter>

igcResizeStart

Section titled "igcResizeStart" 
igcResizeStart: CustomEvent<IgcSplitterResizeEventArgs>

Defined in src/components/splitter/types.ts:44

Example

<!-- Basic horizontal splitter -->
<igc-splitter>
  <div slot="start">Start panel</div>
  <div slot="end">End panel</div>
</igc-splitter>

igcResizing

Section titled "igcResizing" 
igcResizing: CustomEvent<IgcSplitterResizeEventArgs>

Defined in src/components/splitter/types.ts:45

Example

<!-- Basic horizontal splitter -->
<igc-splitter>
  <div slot="start">Start panel</div>
  <div slot="end">End panel</div>
</igc-splitter>