Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxSplitterPaneComponent

Represents individual resizable/collapsible panes.

@igxmodule

IgxSplitterModule

@igxparent

IgxSplitterComponent

@igxkeywords

pane

@igxgroup

presentation

@remarks

Users can control the resize behavior via the min and max size properties.

Hierarchy

  • IgxSplitterPaneComponent

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

maxSize

maxSize: string

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

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

minSize

minSize: string

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

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

onToggle

onToggle: EventEmitter<IgxSplitterPaneComponent> = new EventEmitter<IgxSplitterPaneComponent>()

Event fired when collapsed state of pane is changed.

@example
<igx-splitter>
 <igx-splitter-pane (onToggle)='onPaneToggle($event)'>...</igx-splitter-pane>
</igx-splitter>

resizable

resizable: boolean = true

Gets/Sets whether pane is resizable.

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

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

Accessors

collapsed

  • get collapsed(): boolean
  • set collapsed(value: boolean): void

size

  • get size(): string
  • set size(value: string): void

Methods

toggle

  • toggle(): void