Component · v2.6.0

NgbSplitterComponent

Resizable horizontal or vertical layout containing projected ngb-splitter-pane components.

Import

import { NgbSplitterComponent } from '@angular-bootstrap/ngbootstrap';

Selector:ngb-splitter

Usage notes

Import NgbSplitterComponent and NgbSplitterPaneComponent. Project one ngb-splitter-pane per pane; an empty size shares available space.
Splitter itself has no output events in the installed release. Listen to collapsedChange on each pane for collapse state. There is no resizeEnd or sizeChange output.
Resizing uses pane min/max constraints. Browser measurements run after rendering; provide a usable height for vertical layouts.

Declaration

class NgbSplitterComponent

Inputs

`orientation`

Horizontal arranges panes left-to-right; vertical arranges them top-to-bottom.

orientation: 'horizontal' | 'vertical'

Default:'horizontal'

`handleThickness`

Resize-handle thickness in pixels.

handleThickness: number

Default:12

`handleIconColor`

CSS color of collapse/expand handle icons.

handleIconColor: string

Default:'var(--ngb-on-surface, #000)'

`verticalMinHeight`

Minimum container height used for a vertical splitter.

verticalMinHeight: string

Default:'280px'

`resizable`

Enables pointer resizing and keyboard resize actions on separators.

resizable: boolean

Default:true

`barColor`

CSS background color of separator bars.

barColor: string

Default:'var(--ngb-border-color, #ccc)'

`lineColor`

CSS color of separator grip lines.

lineColor: string

Default:'var(--ngb-on-surface, #000)'

Properties

`panes`

Content query of projected pane components, in display order.

panes: QueryList<NgbSplitterPaneComponent>

Methods

`onMouseMove`

Document mousemove handler that updates a drag resize while active.

onMouseMove(event: MouseEvent): void

`onMouseUp`

Document mouseup handler that ends resizing.

onMouseUp(): void

`onMouseDown`

View handler that starts resizing at the given separator index.

onMouseDown(event: MouseEvent, index: number): void

`onHandleToggle`

View click handler that stops the event and toggles the associated pane.

onHandleToggle(event: Event, index: number): void

`getCollapseIcon`

Returns the pane-toggle icon class based on orientation and collapsed state.

getCollapseIcon(pane: NgbSplitterPaneComponent): string

`getPaneFlex`

Returns the flex sizing expression for a pane, including collapsed and automatic sizing.

getPaneFlex(pane: NgbSplitterPaneComponent): string

`togglePane`

Toggles collapsed on the pane at a valid zero-based index and emits that pane’s collapsedChange. The method does not check collapsible.

togglePane(index: number): void

`getSeparatorAriaOrientation`

Returns the separator orientation, perpendicular to the pane arrangement.

getSeparatorAriaOrientation(): 'horizontal' | 'vertical'

`getHandleValueNow`

Returns the current pane size as an accessible percentage, when measurable.

getHandleValueNow(index: number): number | null

`getHandleValueMin`

Returns the minimum accessible percentage for a resize handle, when measurable.

getHandleValueMin(index: number): number | null

`getHandleValueMax`

Returns the maximum accessible percentage for a resize handle, when measurable.

getHandleValueMax(index: number): number | null

`onHandleKeyDown`

View keyboard handler for resizing and pane collapse/expand.

onHandleKeyDown(event: KeyboardEvent, index: number): void

Referenced types

NgbSplitterPaneComponent

Source: src/splitter/src/splitter/splitter.component.ts in the installed @angular-bootstrap/ngbootstrap package. Angular compiler metadata and private members are omitted.