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).

Common Item Properties (ItemConfig)

Component Items (ComponentItemConfig)

Stack Items (StackItemConfig)

Row and Column Items (RowOrColumnItemConfig)

Common Item Properties (`ItemConfig`)

Component Items (`ComponentItemConfig`)

Stack Items (`StackItemConfig`)

Row and Column Items (`RowOrColumnItemConfig`)