interface / @typed/ui

WindowSplitter.WindowSplitterOptions

Options for the focusable ARIA window splitter.

Learn this UI primitive →

Package version
1.0.0-beta.7
Category
Resize separator
Since
1.0.0
Member of
WindowSplitter

Import

import { WindowSplitter } from "@typed/ui";

Access WindowSplitter.WindowSplitterOptions through the imported WindowSplitter export. Its declaration below describes the member.

This public exposure is a re-export. Its import path is supported; declaration documentation is shared with the other public exposures below.

Signatures

export interface WindowSplitterOptions extends Dom.HostOptions<HTMLDivElement> {
    readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
    readonly primaryPaneId: Renderable.Any<string | null | undefined>;
    readonly label?: Renderable.Any<string | null | undefined>;
    readonly valueText?: Renderable.Any<string | null | undefined>;
    readonly valuePerPixel?: number;
    readonly disabled?: Renderable.Any<boolean | null | undefined>;
}

Property: disabled

Whether keyboard and pointer adjustments are disabled.

Property: disabled: Property: disabled

ARIA disabled state and handler behavior must agree. Dynamic values follow the component Scope.

Property: label

Accessible name when no external label is supplied.

Property: label: Property: label

A focusable separator needs a discoverable purpose. Dynamic values follow the component Scope.

Property: primaryPaneId

Id of the pane controlled by the splitter.

Property: primaryPaneId: Property: primaryPaneId

aria-controls makes the resizing relationship explicit. Dynamic values follow the component Scope.

Property: state

Hydrated sizing state.

Property: state: Property: state

One source drives keyboard updates and every ARIA range attribute. The splitter borrows state; its original Scope owns it.

Property: valuePerPixel

State-value units represented by one CSS pixel of pointer movement.

Property: valuePerPixel: Property: valuePerPixel

By default, the usable parent width (vertical separator) or height (horizontal separator), minus the separator thickness, represents 100 units. This matches percentage pane sizes. Set 1 for CSS-pixel values. Positive axis-aligned CSS scaling is accounted for; pointer coordinates are converted from viewport pixels to the parent’s CSS-pixel scale. Supply a positive finite number when using another unit system. Keyboard step and min/max remain independent of pointer resolution.

Property: valueText

Human-readable value text supplementing the number.

Property: valueText: Property: valueText

Pane sizes such as percentages or labels may be clearer than raw values. Dynamic values follow the component Scope.

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

Source