Window Header Bar

The Header control instance manages the tab strip, position, and action buttons (close, popout, minimise, maximise, dropdown) on each Stack.

Properties

parent

A reference to the Stack this header belongs to.

layoutManager

A reference to the owning LayoutManager instance.

tabs

An array of active Tab controls displayed in this header.

element

The native HTMLElement DOM wrapper for the header bar.

tabsContainerElement

The HTMLElement containing the draggable tab elements.

controlsContainerElement

The HTMLElement containing the action buttons. Custom action buttons can be injected directly into this container.

side

The current side orientation: 'top' | 'left' | 'right' | 'bottom'.

show

Whether this header is currently visible.

positionHeader( side )

Adding Custom Action Buttons

You can append custom controls to any stack header by accessing its controlsContainerElement:

const btn = document.createElement('button');
btn.className = 'custom-header-btn';
btn.title = 'Refresh Component Data';
btn.textContent = '🔄';
btn.onclick = () => refreshActiveData();

stack.header.controlsContainerElement.prepend(btn);