Item Configuration

Layout trees in Strelit UI Kit are composed of four node types: 'row', 'column', 'stack', and 'component'. 

import { LayoutConfig, ComponentItemConfig, StackItemConfig } from 'strelit-ui-kit';

const config: LayoutConfig = {
  root: {
    type: 'row',
    content: [
      {
        type: 'component',
        componentType: 'sourceViewer',
        title: 'Source Code',
        size: '60%',
        componentState: { filePath: '/src/main.ts' }
      } as ComponentItemConfig,
      {
        type: 'stack',
        size: '40%',
        activeItemIndex: 0,
        content: [
          {
            type: 'component',
            componentType: 'terminal',
            title: 'Build Terminal'
          },
          {
            type: 'component',
            componentType: 'telemetry',
            title: 'Performance'
          }
        ]
      } as StackItemConfig
    ]
  }
};

Common Item Properties (`ItemConfig`)

argument type optional default description
type 'row' | 'column' | 'stack' | 'component' false - The structural type of the item.
id string true '' Unique identifier for retrieving items via layout.findFirstComponentItemById(id) or item.getItemsById(id).
size string true - The relative or fixed size of this item among siblings. Supports percentages (e.g. '40%'), pixels (e.g. '250px'), or fractional units (e.g. '2fr').
minSize string true - Minimum size below which the item cannot be resized (e.g. '120px').
isClosable boolean true true If false, the close button on the tab/header is omitted and cannot be closed by the user.
title string true '' The label displayed on the tab header for component items.

Component Items (`ComponentItemConfig`)

argument type optional default description
componentType ComponentType (string) false - The registered component identifier matching a factory function registered via layout.registerComponentFactoryFunction().
componentState SerializableValue true undefined Any serializable object, string, number, or array passed to the component container upon mounting.
reorderEnabled boolean true true Whether this specific component tab can be dragged to reorder within or across stacks.
header HeaderedItemConfigHeader true undefined Custom item-level overrides for header controls (close, popout, minimise, maximise).

Stack Items (`StackItemConfig`)

argument type optional default description
content ComponentItemConfig[] false [] The array of component items hosted within this tabbed stack. Note: Stacks cannot contain other stacks or rows/columns.
activeItemIndex number true 0 0-based index of the component tab that is active and visible initially.
maximised boolean true false Whether this stack starts in the maximised state filling the layout viewport.

Row and Column Items (`RowOrColumnItemConfig`)

argument type optional default description
type 'row' | 'column' false - 'row' splits items horizontally (left to right); 'column' splits items vertically (top to bottom).
content ItemConfig[] false [] Array of child items (which can be rows, columns, stacks, or components).

Community & Support

Need help or have architectural questions?

Whether you are building complex multi-screen trading terminals, enterprise data workspaces, or migrating from legacy layout engines, the Strelit UI Kit engineering team and community are here to help.

Open an Issue on GitHub →