Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

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

Accessors

Methods

Constructors

constructor

Properties

document

document: any

nonCollapsible

nonCollapsible: boolean = false

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

Example

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

panes

panes: QueryList<IgxSplitterPaneComponent>

Gets the list of splitter panes.

Example

const panes = this.splitter.panes;

resizeEnd

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

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

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

type

Methods

onMoveEnd