SplitViewComponent

component

Component for creating a split view with resizable areas.

Each area is defined using the yuvSplitArea directive on an ng-template. Areas can be resized by dragging the gutter between them.

Basic usage

Example :

<yuv-split-view>

<ng-template yuvSplitArea [size]="20">Aside</ng-template>

<ng-template yuvSplitArea [size]="80">Main</ng-template>

</yuv-split-view>

Collapsible areas

Areas can be shown, hidden, or toggled programmatically. Use a template reference variable to call the visibility methods from the template:

Example :

<yuv-split-view #sv>

<ng-template yuvSplitArea [size]="25">

  <button (click)="sv.hideArea(0)">Collapse</button>

  Left pane

</ng-template>

<ng-template yuvSplitArea [size]="75">

  <button (click)="sv.showArea(0)">Expand left</button>

  Main pane

</ng-template>

</yuv-split-view>

Persisting layout state

Set layoutSettingsID to persist area sizes and visibility to localStorage. The saved state is automatically restored on init.

Example :

<yuv-split-view [layoutSettingsID]="'my-layout'">

...

</yuv-split-view>

Component Metadata

Selector: yuv-split-view

Standalone: No

Implements: AfterViewInit

Inputs

direction

Type: SplitDirection

Default Value: 'horizontal'

The split views direction. Could be ‘horizontal’ or ‘vertical’. Defaults to ‘horizontal’.

disabledInput

Type: boolean

Default Value: false, \{ alias: 'disabled' \}

Disable the dragging feature (remove cursor/image on gutters).

gutterSize

Type: number

Default Value: 16

Size of the gutter in Pixel (defaults to 16).

layoutSettingsID

Type: string

Layout settings are the state of the split view that could be persisted. Setting a layoutSettingsID will save the current state (split area sizes etc.) to the local storage. If the component is created, it will load those settings and re-apply them.

restrictMove

Type: boolean

Default Value: false

If true, the gutter can only be moved in steps of 1%.

Outputs

dragEnd

Type: SplitViewOutputData

Emitted when dragging the split gutter ends

dragStart

Type: SplitViewOutputData

Emitted when dragging the split gutter starts

gutterClick

Type: SplitViewOutputData

Emitted when the split gutter is clicked.

gutterDblClick

Type: SplitViewOutputData

Emitted when the split gutter is double clicked (you may also want to set a different click duration indicating a double click). This could be set using the gutterDblClickDuration to a value in milliseconds (default is 400ms)

layoutSettingsChange

Type: SplitViewLayoutSettings

Emitted when the state (split area sizes etc.) of the split view changed.

Properties

asSplitComponent

Type: unknown

Default Value: viewChild.required<SplitComponent>(SplitComponent)

disabled

Type: unknown

Default Value: linkedSignal(() => this.disabledInput())

dragging

Type: unknown

Default Value: signal<boolean>(false)

isHorizontal

Type: unknown

Default Value: computed(() => this.direction() === 'horizontal')

isVertical

Type: unknown

Default Value: computed(() => this.direction() === 'vertical')

splitAreas

Type: unknown

Default Value: contentChildren<SplitAreaDirective>(SplitAreaDirective)

splitAreaSizes

Type: SplitAreaSize[]

Default Value: []

Methods

applyLayoutSettings

Programmatically apply layout settings (area sizes, visibility, disabled state). This is called automatically on init when layoutSettingsID is set, but can also be used to restore a specific layout configuration at any time.

applyLayoutSettings(settings: SplitViewLayoutSettings): void

Arguments

Name	Type	Description
settings	`SplitViewLayoutSettings`

hideArea

Hide a split area by collapsing it to zero width/height. The adjacent areas will expand to fill the freed space.Example :

<button (click)="sv.hideArea(0)">Hide left pane</button>

hideArea(index: number): void

Arguments

Name	Type	Description
index	`number`

isAreaVisible

Returns whether a split area is currently visible. Useful for conditionally rendering expand/collapse buttons in the template.Example :

@if (!sv.isAreaVisible(0)) {  <button (click)="sv.showArea(0)">Expand left</button>}

isAreaVisible(index: number): boolean

Arguments

Name	Type	Description
index	`number`

onDragEnd

onDragEnd(e: SplitViewOutputData): void

Arguments

Name	Type	Description
e	`SplitViewOutputData`

onDragStart

onDragStart(e: SplitViewOutputData): void

Arguments

Name	Type	Description
e	`SplitViewOutputData`

showArea

Show a previously hidden split area, restoring it to its last known size.Example :

<button (click)="sv.showArea(0)">Show left pane</button>

showArea(index: number): void

Arguments

Name	Type	Description
index	`number`

splitAreaSetVisibility

splitAreaSetVisibility(index: number, visible: boolean): void // DEPRECATED

Arguments

Name	Type	Description
index	`number`
visible	`boolean`

splitAreaToggleVisibility

splitAreaToggleVisibility(index: number): void // DEPRECATED

Arguments

Name	Type	Description
index	`number`

toggleArea

Toggle the visibility of a split area. If the area is currently visible it will be collapsed; if it is hidden it will be restored.Example :

<button (click)="sv.toggleArea(0)">Toggle left pane</button>

toggleArea(index: number): void

Arguments

Name	Type	Description
index	`number`