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

    Class UISplitContainer

    A resizable split container that renders N panels separated by draggable dividers. Place <ui-split-panel> elements as children — one divider is automatically inserted between every adjacent pair.

    Each divider only ever adjusts its two immediately adjacent panels; all other panels are unaffected.

    <ui-split-container>
      <ui-split-panel>Left</ui-split-panel>
      <ui-split-panel>Right</ui-split-panel>
    </ui-split-container>

    <ui-split-container orientation="horizontal">
      <ui-split-panel [min]="120">Nav</ui-split-panel>
      <ui-split-panel>Editor</ui-split-panel>
      <ui-split-panel [min]="160">Inspector</ui-split-panel>
    </ui-split-container>

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

    <ui-split-container name="editor-layout">
      <ui-split-panel>Sidebar</ui-split-panel>
      <ui-split-panel>Main</ui-split-panel>
    </ui-split-container>

    Implements

    • AfterViewInit
    Index

    Constructors

    constructor

    Properties

    ariaLabel disabled dividerWidth initialSizes name orientation resized resizing sizes

    Methods

    ngAfterViewInit

    Constructors

    Properties

    ariaLabel: InputSignal<string> = ...

    Accessible label for each divider.

    disabled: InputSignal<boolean> = ...

    Whether the split container is disabled.

    dividerWidth: InputSignal<number> = ...

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

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

    Initial panel sizes as percentages. Must sum to 100 and have one entry per <ui-split-panel> child. Defaults to equal distribution.

    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.

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

    Current panel sizes as a percentage array. One entry per <ui-split-panel> child.

    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 usageThree-pane layoutVertical orientation with initial sizesPersistent sizes (localStorage)
    Constructors
    Properties
    Methods