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:51

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:190

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:64

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:134

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:107

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:120

Example

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

type

Section titled "type" 
type: SplitterType

Defined in projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:170, projects/igniteui-angular/splitter/src/splitter/splitter.component.ts:173

Methods

Section titled "Methods"

onMoveEnd

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

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

Parameters

  • delta: number

Returns void