@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UISplitContainer

    A resizable split container that hosts two content panels separated by a draggable divider.

    Project two ng-template children with #first and #second template references.

    <ui-split-container>
      <ng-template #first>Left panel</ng-template>
      <ng-template #second>Right panel</ng-template>
    </ui-split-container>

    <ui-split-container orientation="vertical" [initialSizes]="[30, 70]">
      <ng-template #first>Top panel</ng-template>
      <ng-template #second>Bottom panel</ng-template>
    </ui-split-container>

    <ui-split-container name="editor-layout">
      <ng-template #first>Sidebar</ng-template>
      <ng-template #second>Main</ng-template>
    </ui-split-container>

    <ui-split-container collapseTarget="first">
      <ng-template #first>Sidebar</ng-template>
      <ng-template #second>Main</ng-template>
    </ui-split-container>

    Implements

    • AfterViewInit
    Index

    Constructors

    constructor

    Properties

    ariaLabel collapseTarget disabled dividerWidth firstConstraints initialSizes name orientation resized resizing secondConstraints sizes

    Methods

    ngAfterViewInit

    Constructors

    Properties

    ariaLabel: InputSignal<string> = ...

    Accessible label for the divider.

    collapseTarget: InputSignal<SplitCollapseTarget> = ...

    Which panel to collapse when the divider is double-clicked. Set to 'none' (default) to disable double-click collapse.

    disabled: InputSignal<boolean> = ...

    Whether the split container is disabled.

    dividerWidth: InputSignal<number> = ...

    Width (or height, in vertical mode) of the divider bar in pixels.

    firstConstraints: InputSignal<SplitPanelConstraints> = ...

    Size constraints for the first (left / top) panel.

    initialSizes: InputSignal<readonly [number, number]> = ...

    Initial panel sizes as a [first, second] percentage tuple. Must sum to 100. Defaults to [50, 50].

    name: InputSignal<string | undefined> = ...

    Optional name used as the localStorage key for persisting sizes. When set, the container restores its last saved sizes on init and saves after every resize.

    orientation: InputSignal<SplitOrientation> = ...

    Layout orientation. Defaults to 'horizontal' (side-by-side).

    resized: OutputEmitterRef<SplitResizeEvent> = ...

    Emits after the user finishes dragging (on pointerup).

    resizing: OutputEmitterRef<SplitResizeEvent> = ...

    Emits continuously while the user is dragging.

    secondConstraints: InputSignal<SplitPanelConstraints> = ...

    Size constraints for the second (right / bottom) panel.

    sizes: Signal<readonly [number, number]> = ...

    Panel sizes as a [first, second] percentage tuple.

    Methods

    • A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

      Returns void

    Settings

    Member Visibility

    On This Page

    Basic usageVertical orientationPersistent sizesDouble-click collapse
    Constructors
    Properties
    Methods