Provides a framework for a simple layout, splitting the view horizontally or vertically into multiple smaller resizable and collapsible areas.
Igx Module
IgxSplitterModule
Igx Theme
igx-splitter-theme
Igx Keywords
splitter panes layout
Igx Group
presentation

Example

<igx-splitter>
 <igx-splitter-pane>
     ...
 </igx-splitter-pane>
 <igx-splitter-pane>
     ...
 </igx-splitter-pane>
</igx-splitter>

Constructors

Section titled "Constructors"

IgxSplitterComponent 

new IgxSplitterComponent(): IgxSplitterComponent

Returns IgxSplitterComponent

Properties

Section titled "Properties"

document

Section titled "document" 
document: Document

Defined in projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:52

nonCollapsible

Section titled "nonCollapsible"

Sets the visibility of the handle and expanders in the splitter bar. False by default

 
nonCollapsible: boolean = false

Defined in projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:191

Example

<igx-splitter [nonCollapsible]='true'>
</igx-splitter>

panes

Section titled "panes"

Gets the list of splitter panes.

 
panes: QueryList<IgxSplitterPaneComponent>

Defined in projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:65

Example

const panes = this.splitter.panes;

resizeEnd

Section titled "resizeEnd"

Event fired when resizing of panes ends.

 
resizeEnd: EventEmitter<ISplitterBarResizeEventArgs>

Defined in projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:135

Example

<igx-splitter (resizeEnd)='resizeEnd($event)'>
 <igx-splitter-pane>...</igx-splitter-pane>
</igx-splitter>

resizeStart

Section titled "resizeStart"

Event fired when resizing of panes starts.

 
resizeStart: EventEmitter<ISplitterBarResizeEventArgs>

Defined in projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:108

Example

<igx-splitter (resizeStart)='resizeStart($event)'>
 <igx-splitter-pane>...</igx-splitter-pane>
</igx-splitter>

resizing

Section titled "resizing"

Event fired when resizing of panes is in progress.

 
resizing: EventEmitter<ISplitterBarResizeEventArgs>

Defined in projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:121

Example

<igx-splitter (resizing)='resizing($event)'>
 <igx-splitter-pane>...</igx-splitter-pane>
</igx-splitter>

Accessors

Section titled "Accessors"

type

Section titled "type"

Gets/Sets the splitter orientation.

 
get type(): SplitterType

Defined in projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:171

Example

<igx-splitter [type]="type">...</igx-splitter>

Returns SplitterType 

set type(value: SplitterType): void

Defined in projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:174

Parameters

Returns void

Methods

Section titled "Methods"

onMoveEnd

Section titled "onMoveEnd" 
onMoveEnd(delta: number): void

Defined in projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:246

Parameters

  • delta: number

Returns void