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.
- 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.
Remarks
Example
<!-- Basic horizontal splitter -->
<igc-splitter>
<div slot="start">Start panel</div>
<div slot="end">End panel</div>
</igc-splitter>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: boolean = falseDefined in src/components/splitter/splitter.ts:242
disableResize
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: boolean = falseDefined in src/components/splitter/splitter.ts:252
hideCollapseButtons
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: boolean = falseDefined in src/components/splitter/splitter.ts:267
hideDragHandle
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: boolean = falseDefined in src/components/splitter/splitter.ts:281
orientation
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: SplitterOrientation = 'horizontal'Defined in src/components/splitter/splitter.ts:233
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.
tagName: "igc-splitter" = 'igc-splitter'Defined in src/components/splitter/splitter.ts:154
Accessors
Section titled "Accessors"endCollapsed
Section titled "endCollapsed"get endCollapsed(): anyDefined in src/components/splitter/splitter.ts:407
Whether the end pane is currently collapsed. Set this property to collapse or expand the pane programmatically.
set endCollapsed(value: boolean): voidDefined in src/components/splitter/splitter.ts:407
Parameters
- value:
boolean
Returns void
endMaxSize
Section titled "endMaxSize"get endMaxSize(): anyDefined in src/components/splitter/splitter.ts:343
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.
set endMaxSize(value: string | undefined): voidDefined in src/components/splitter/splitter.ts:343
Parameters
- value:
string | undefined
Returns void
endMinSize
Section titled "endMinSize"get endMinSize(): anyDefined in src/components/splitter/splitter.ts:309
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.
set endMinSize(value: string | undefined): voidDefined in src/components/splitter/splitter.ts:309
Parameters
- value:
string | undefined
Returns void
endSize
Section titled "endSize"get endSize(): anyDefined in src/components/splitter/splitter.ts:377
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.
set endSize(value: string | undefined): voidDefined in src/components/splitter/splitter.ts:377
Parameters
- value:
string | undefined
Returns void
startCollapsed
Section titled "startCollapsed"get startCollapsed(): anyDefined in src/components/splitter/splitter.ts:392
Whether the start pane is currently collapsed. Set this property to collapse or expand the pane programmatically.
set startCollapsed(value: boolean): voidDefined in src/components/splitter/splitter.ts:392
Parameters
- value:
boolean
Returns void
startMaxSize
Section titled "startMaxSize"get startMaxSize(): anyDefined in src/components/splitter/splitter.ts:326
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.
set startMaxSize(value: string | undefined): voidDefined in src/components/splitter/splitter.ts:326
Parameters
- value:
string | undefined
Returns void
startMinSize
Section titled "startMinSize"get startMinSize(): anyDefined in src/components/splitter/splitter.ts:292
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.
set startMinSize(value: string | undefined): voidDefined in src/components/splitter/splitter.ts:292
Parameters
- value:
string | undefined
Returns void
startSize
Section titled "startSize"get startSize(): anyDefined in src/components/splitter/splitter.ts:360
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.
set startSize(value: string | undefined): voidDefined in src/components/splitter/splitter.ts:360
Parameters
- value:
string | undefined
Returns void
Methods
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(): voidDefined in src/components/splitter/splitter.ts:473
Returns 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): voidDefined in src/components/splitter/splitter.ts:557
Parameters
- position:
PanePosition