Represents individual resizable/collapsible panes.
Igx Module
IgxSplitterModule
Igx Keywords
pane
Igx Group
presentation

Remarks

[object Object]

Constructors

Section titled "Constructors"

IgxSplitterPaneComponent 

new IgxSplitterPaneComponent(): IgxSplitterPaneComponent

Returns IgxSplitterPaneComponent

Properties

Section titled "Properties"

collapsedChange

Section titled "collapsedChange"

Event fired when collapsed state of pane is changed.

 
collapsedChange: EventEmitter<boolean>

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

Example

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

resizable

Section titled "resizable"

Gets/Sets whether pane is resizable.

 
resizable: boolean = true

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

Remarks

If pane is not resizable its related splitter bar cannot be dragged.

Example

<igx-splitter>
 <igx-splitter-pane [resizable]='false'>...</igx-splitter-pane>
</igx-splitter>

Accessors

Section titled "Accessors"

collapsed

Section titled "collapsed"

Gets/Sets whether current pane is collapsed.

 
set collapsed(value: boolean): void

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

Example

const isCollapsed = pane.collapsed;

Parameters

  • value: boolean

Returns void

dragSize

Section titled "dragSize" 
set dragSize(val: any): void

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

Parameters

  • val: any

Returns void

maxSize

Section titled "maxSize"

Gets/Set the maximum allowed size of the current pane.

 
get maxSize(): string

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

Example

<igx-splitter>
 <igx-splitter-pane [maxSize]='maxSize'>...</igx-splitter-pane>
</igx-splitter>

Returns string 

set maxSize(value: string): void

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

Parameters

  • value: string

Returns void

minSize

Section titled "minSize"

Gets/Sets the minimum allowed size of the current pane.

 
get minSize(): string

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

Example

<igx-splitter>
 <igx-splitter-pane [minSize]='minSize'>...</igx-splitter-pane>
</igx-splitter>

Returns string 

set minSize(value: string): void

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

Parameters

  • value: string

Returns void

order

Section titled "order" 
set order(val: number): void

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

Parameters

  • val: number

Returns void

size

Section titled "size"

Gets/Sets the size of the current pane. *

 
get size(): string

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

Example

<igx-splitter>
 <igx-splitter-pane [size]='size'>...</igx-splitter-pane>
</igx-splitter>

Returns string 

set size(value: string): void

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

Parameters

  • value: string

Returns void

Methods

Section titled "Methods"

toggle

Section titled "toggle"

Toggles the collapsed state of the pane.

 
toggle(): void

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

Returns void

Example

pane.toggle();