Class IgxSplitterComponent

Provides a framework for a simple layout, splitting the view horizontally or vertically into multiple smaller resizable and collapsible areas.

Igx Module

IgxSplitterModule

Igx Parent

Layouts

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>

Implements

  • AfterContentInit

Constructors

Properties

document: any
panes: QueryList<IgxSplitterPaneComponent>

Gets the list of splitter panes.

Example

const panes = this.splitter.panes;
resizeEnd: EventEmitter<ISplitterBarResizeEventArgs> = ...

Event fired when resizing of panes ends.

Example

<igx-splitter (resizeEnd)='resizeEnd($event)'>
<igx-splitter-pane>...</igx-splitter-pane>
</igx-splitter>
resizeStart: EventEmitter<ISplitterBarResizeEventArgs> = ...

Event fired when resizing of panes starts.

Example

<igx-splitter (resizeStart)='resizeStart($event)'>
<igx-splitter-pane>...</igx-splitter-pane>
</igx-splitter>
resizing: EventEmitter<ISplitterBarResizeEventArgs> = ...

Event fired when resizing of panes is in progress.

Example

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

Accessors

Methods