@jimka/typescript-ui

Appearance

@jimka/typescript-ui / layout / Tab

Class: Tab ​

Defined in: src/typescript/lib/layout/Tab.ts:83

A layout manager that renders a row of tab buttons above the container content area and shows exactly one child component at a time based on the selected tab. Tab button labels are taken from LayoutConstraints.name when available, otherwise from the component's ID.

Extends ​

Constructors ​

new Tab() ​

ts
new Tab(options?: TabOptions): Tab

Defined in: src/typescript/lib/layout/Tab.ts:101

Creates a Tab layout manager with an empty toolbar.

Parameters ​

options? ​

TabOptions

Optional construction-time options.

Returns ​

Tab

Overrides ​

LayoutManager.constructor

Methods ​

addLazyTab() ​

ts
addLazyTab(
   factory: () => Component, 
   name: string, 
   constraints?: LayoutConstraints): void

Defined in: src/typescript/lib/layout/Tab.ts:475

Registers a tab whose content component is built on first activation rather than at registration time. The tab button is created immediately so the tab strip renders fully on first paint; the factory runs only when the tab is first selected (or laid out as the initial tab).

Parameters ​

factory ​

() => Component

A zero-argument function that produces the content component on first activation.

name ​

string

The visible label for the tab button.

constraints? ​

LayoutConstraints

Optional layout constraints; forwarded to container.addComponent when the component is materialized.

Returns ​

void

Remarks ​

Materialization is asynchronous: on first activation the tab strip selects the new tab immediately, a centred ProgressSpinner is mounted into the container, and the factory runs after a two-rAF yield via Animation.materialize so the spinner reaches the screen before the main-thread build cost is incurred. The materialized component fades in over the spinner.

Layout-sizing queries (getPreferredSize / getMinSize / getMaxSize) do not trigger factory invocations — they observe the spinner placeholder until the build completes.

Once a Tab contains any lazy entries, mixing direct container.addComponent(c, {...}) calls is not supported: tabs.length may equal or exceed componentCount, which causes the auto-createTab loop in doLayout to skip the eager component. Use addLazyTab for all subsequent additions, or stay fully eager.

Example ​

typescript
const layout = new Tab();
body.setLayoutManager(layout);
layout.addLazyTab(() => new HeavyPanel(), "Heavy");

attach() ​

ts
attach(container: Component): this

Defined in: src/typescript/lib/layout/Tab.ts:157

Attaches to a container and appends the tab toolbar element to it.

Parameters ​

container ​

Component

The container component to attach to.

Returns ​

this

Overrides ​

LayoutManager.attach

createTab() ​

ts
createTab(component: Component): void

Defined in: src/typescript/lib/layout/Tab.ts:422

Creates a tab entry for a component and adds it to the toolbar.

Parameters ​

component ​

Component

The content component for which a tab entry should be created.

Returns ​

void

Remarks ​

The button label is taken from LayoutConstraints.name when available; otherwise the component's ID is used. When constraints.closeable is true, a TabCloseButton is appended to the wrapper after the toggle button.

delLayoutConstraints() ​

ts
delLayoutConstraints(component: Component): undefined | LayoutConstraints

Defined in: src/typescript/lib/layout/LayoutManager.ts:276

Removes and returns the stored layout constraints for a component.

Parameters ​

component ​

Component

The component whose constraints should be removed.

Returns ​

undefined | LayoutConstraints

The removed constraints, or undefined if none were stored.

Inherited from ​

LayoutManager.delLayoutConstraints

detach() ​

ts
detach(): this

Defined in: src/typescript/lib/layout/Tab.ts:173

Detaches from the container and removes the tab toolbar element from the DOM.

Returns ​

this

Overrides ​

LayoutManager.detach

doLayout() ​

ts
doLayout(): void

Defined in: src/typescript/lib/layout/Tab.ts:558

Creates tab buttons for new components, hides all but the selected child, and positions the toolbar and the visible component.

Returns ​

void

Remarks ​

Tab buttons are created lazily: only components that do not yet have a corresponding button receive one. The toolbar is positioned at the top of the container and the visible component occupies the remaining space beneath it.

Overrides ​

LayoutManager.doLayout

getClassName() ​

ts
getClassName(): string

Defined in: src/typescript/lib/core/BaseObject.ts:44

Returns the runtime class name of this object.

Returns ​

string

The name of the constructor function as a string.

Inherited from ​

LayoutManager.getClassName

getContainer() ​

ts
getContainer(): null | Component

Defined in: src/typescript/lib/layout/LayoutManager.ts:78

Returns the container component this layout manager is attached to.

Returns ​

null | Component

The attached container, or null if not attached.

Inherited from ​

LayoutManager.getContainer

getId() ​

ts
getId(): string

Defined in: src/typescript/lib/core/BaseObject.ts:24

Returns the unique identifier for this object.

Returns ​

string

The UUID string assigned at construction time.

Inherited from ​

LayoutManager.getId

getLayoutConstraints() ​

ts
getLayoutConstraints(component: Component): undefined | LayoutConstraints

Defined in: src/typescript/lib/layout/LayoutManager.ts:291

Returns the stored layout constraints for a component.

Parameters ​

component ​

Component

The component to look up.

Returns ​

undefined | LayoutConstraints

The stored constraints, or undefined if none are set.

Inherited from ​

LayoutManager.getLayoutConstraints

getMaxSize() ​

ts
getMaxSize(): null | Size

Defined in: src/typescript/lib/layout/Tab.ts:288

Returns the maximum size: the visible component's maximum size plus the toolbar maximum height.

Returns ​

null | Size

The maximum {width, height}, or null if there is no container or visible component.

Overrides ​

LayoutManager.getMaxSize

getMinSize() ​

ts
getMinSize(): null | Size

Defined in: src/typescript/lib/layout/Tab.ts:251

Returns the minimum size: the visible component's minimum size plus the toolbar minimum height.

Returns ​

null | Size

The minimum {width, height}, or null if there is no container or visible component.

Overrides ​

LayoutManager.getMinSize

getPreferredSize() ​

ts
getPreferredSize(): null | Size

Defined in: src/typescript/lib/layout/Tab.ts:214

Returns the preferred size: the visible component's preferred size plus the toolbar height.

Returns ​

null | Size

The preferred {width, height}, or null if there is no container or visible component.

Overrides ​

LayoutManager.getPreferredSize

getVisibleComponent() ​

ts
getVisibleComponent(): null | Component

Defined in: src/typescript/lib/layout/Tab.ts:187

Returns the child component at the currently selected tab index, materializing a lazily-registered panel on first access.

Returns ​

null | Component

The visible component, or null if no entry is registered at the selected index or the container is not attached.

onTabPressed() ​

ts
onTabPressed(tab: Component): void

Defined in: src/typescript/lib/layout/Tab.ts:136

Updates the selected tab index, syncs the roving tabindex, and triggers a re-layout when a tab button is clicked.

Parameters ​

tab ​

Component

The tab button component that was pressed.

Returns ​

void

placeComponent() ​

ts
placeComponent(
   component: Component, 
   x: number, 
   y: number, 
   maxWidth: number, 
   maxHeight: number, 
   fill?: null | FillType, 
   anchor?: null | AnchorType): void

Defined in: src/typescript/lib/layout/LayoutManager.ts:126

Positions and sizes a child component within the given bounds, respecting fill and anchor constraints.

Parameters ​

component ​

Component

The child component to position.

x ​

number

Left edge of the cell in the container's coordinate space.

y ​

number

Top edge of the cell in the container's coordinate space.

maxWidth ​

number

Available width for the component.

maxHeight ​

number

Available height for the component.

fill? ​

Optional. Fill strategy overriding the component's own constraints.

null | FillType

anchor? ​

Optional. Anchor point overriding the component's own constraints.

null | AnchorType

Returns ​

void

Remarks ​

The method checks the component's stored LayoutConstraints first; the fill and anchor parameters serve as fallbacks. After positioning, doLayout is called on the child so nested layouts are updated in a single pass.

Inherited from ​

LayoutManager.placeComponent

setId() ​

ts
setId(id: string): this

Defined in: src/typescript/lib/core/BaseObject.ts:33

Sets the unique identifier for this object.

Parameters ​

id ​

string

The new identifier string to assign.

Returns ​

this

Inherited from ​

LayoutManager.setId

setLayoutConstraints() ​

ts
setLayoutConstraints(component: Component, constraints?: LayoutConstraints): undefined | LayoutConstraints

Defined in: src/typescript/lib/layout/LayoutManager.ts:260

Stores layout constraints for a component, or removes them if constraints is undefined.

Parameters ​

component ​

Component

The component whose constraints are being set.

constraints? ​

LayoutConstraints

Optional. The constraints to store; omit to delete existing constraints.

Returns ​

undefined | LayoutConstraints

The stored constraints, or undefined if they were deleted.

Inherited from ​

LayoutManager.setLayoutConstraints

setOnTabClose() ​

ts
setOnTabClose(callback: (component: Component) => void): void

Defined in: src/typescript/lib/layout/Tab.ts:652

Registers a callback invoked after a tab is closed.

Parameters ​

callback ​

(component: Component) => void

Receives the content component that was removed.

Returns ​

void