Content Item Hierarchy

All visual elements within a Strelit layout inherit from ContentItem. The item hierarchy forms a strict tree structure:

RowOrColumn: Arranges children horizontally (row) or vertically ( column).
Stack: Hosts tabbed component panels (stack).
ComponentItem: Leaf nodes hosting individual ComponentContainers.

Hierarchy Overview

EventEmitter
 └── ContentItem (abstract)
      ├── ComponentParentableItem (abstract)
      │    └── Stack
      ├── ComponentItem
      └── RowOrColumn

Properties

type

The type of the item: 'row' | 'column' | 'stack' | 'component' | 'ground'.

contentItems

An array of direct child ContentItem instances.

parent

The parent ContentItem node, or null for root items.

id

The string identifier assigned to this item.

isInitialised

True once the item has been initialized and bound to the DOM.

isRow / isColumn / isStack / isComponent

Boolean type discrimination flags.

layoutManager

Reference to the owning LayoutManager / StrelitLayout instance.

element

The native HTMLElement DOM wrapper for this item node.

isClosable

Whether this item can be closed by the user.

Static Type Guards

Strelit UI Kit provides static TypeScript type guards to safely discriminate item types at runtime:

import { ContentItem } from 'strelit-ui-kit';

if (ContentItem.isComponentItem(item)) {
  // item is ComponentItem
  console.log(item.componentType, item.container);
} else if (ContentItem.isStack(item)) {
  // item is Stack
  const activeComp = item.getActiveComponentItem();
}

Tree Manipulation

addChild( contentItem, index?, suspendResize? )

Adds a child ContentItem to this item node at the specified index position.

removeChild( contentItem, keepChild? )

Removes a child item. If keepChild is false (default), the child item is destroyed.

replaceChild( oldChild, newChild, destroyOldChild? )

Replaces an existing child node with a new content item in-place.

remove()

Removes this item from its parent and destroys it.

popout()

Pops this item out into a new detached BrowserPopout window.

Query Helpers

getItemsById( id )

Recursively searches the subtree for all content items matching the specified string ID.

getItemsByType( type )

Recursively returns all items matching the specified ItemType (e.g. 'stack', 'component').

getComponentItemsByType( componentType )

Recursively finds all ComponentItem leaves registered with the given component type name.

Stack API

For items where ContentItem.isStack(item) is true:

getActiveComponentItem()

Returns the currently selected / active ComponentItem tab in the stack.

setActiveComponentItem( item, focus, suppressFocusEvent? )

Switches the active tab to the specified component item and optionally sets focus.

maximise() / minimise() / toggleMaximise()

Toggles full-viewport maximization of this stack.

Access the Header control instance governing the stack’s tabs and action buttons.