Layout Configuration

In Strelit UI Kit, layouts are defined via the typed LayoutConfig interface. The configuration separates structural hierarchy ( root) from behavioral settings (settings), header controls ( header), and visual geometry (dimensions).

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

const config: LayoutConfig = {
  root: {
    type: 'row',
    content: [
      {
        type: 'component',
        componentType: 'explorer',
        title: 'File Explorer',
        size: '25%',
      },
      {
        type: 'column',
        size: '75%',
        content: [
          {
            type: 'component',
            componentType: 'editor',
            title: 'Workspace Editor',
          },
          {
            type: 'component',
            componentType: 'terminal',
            title: 'Terminal Logs',
            size: '35%',
          },
        ],
      },
    ],
  },
  header: {
    show: 'top',
    popout: 'open in new window',
    maximise: 'maximise',
    minimise: 'minimise',
    close: 'close',
    tabDropdown: 'additional tabs',
  },
  dimensions: {
    borderWidth: 5,
    borderGrabWidth: 5,
    defaultMinItemHeight: '0px',
    defaultMinItemWidth: '10px',
    headerHeight: 20,
    dragProxyWidth: 300,
    dragProxyHeight: 200,
  },
  settings: {
    constrainDragToContainer: true,
    reorderEnabled: true,
    popoutWholeStack: false,
    blockedPopoutsThrowError: true,
    closePopoutsOnUnload: true,
    responsiveMode: 'none',
    tabOverlapAllowance: 0,
    reorderOnTabMenuClick: true,
    tabControlOffset: 10,
    popInOnClose: false,
  },
};

const layout = new StrelitLayout(document.getElementById('layoutContainer'));
layout.loadLayout(config);

root (`RootItemConfig`)

The root element of the layout hierarchy. Can be a RowOrColumnItemConfig (type

‘row’ or ‘column’), a StackItemConfig (type ‘stack’), or a single ComponentItemConfig (type ‘component’). For detailed item options, see Item Configuration.

settings (`LayoutConfigSettings`)

argument	type	optional	default	description
constrainDragToContainer	boolean	true	true	Constrains the area in which internal items can be dragged to within the layout’s container bounds.
reorderEnabled	boolean	true	true	If true, users can rearrange the layout by dragging tabs between stacks.
popoutWholeStack	boolean	true	false	If true, clicking the popout button detaches the entire active stack. If false, only the active component item is popped out.
blockedPopoutsThrowError	boolean	true	true	Whether an exception (`PopoutBlockedError`) is thrown when a browser popup blocker prevents opening a popout window.
closePopoutsOnUnload	boolean	true	true	Specifies if all child popout windows should automatically close when the parent window is refreshed or closed.
responsiveMode	‘none’ \| ‘always’ \| ‘onload’	true	‘none’	Responsive reflow behavior for small screens or mobile viewports.
tabOverlapAllowance	number	true	0	Pixel allowance for tabs to overlap before triggering the tab overflow dropdown menu.
reorderOnTabMenuClick	boolean	true	true	Whether selecting a tab from the overflow dropdown brings that tab to the primary visible tab area.
tabControlOffset	number	true	10	Pixel spacing between the tabs and the header action buttons (close, popout, maximise).
popInOnClose	boolean	true	false	If true, closing a popout window automatically docks it back into its original position in the main layout.

header (`LayoutConfigHeader`)

argument	type	optional	default	description
show	false \| ‘top’ \| ‘left’ \| ‘right’ \| ‘bottom’	true	‘top’	Position of the tab strip header bar on stacks. If set to `false`, headers are hidden entirely (splitter mode).
popout	false \| string	true	‘open in new window’	Tooltip label for the popout icon. Set to `false` to disable the popout button.
dock	string	true	‘dock’	Tooltip label for the dock button displayed inside popout child windows.
maximise	false \| string	true	‘maximise’	Tooltip label for the maximise icon. Set to `false` to hide the maximise control.
minimise	string	true	‘minimise’	Tooltip label for the minimise icon when a stack is currently maximised.
close	false \| string	true	‘close’	Tooltip label for the close icon. Set to `false` to prevent closing items from the header.
tabDropdown	false \| string	true	‘additional tabs’	Tooltip label for the overflow tabs dropdown button.

dimensions (`LayoutConfigDimensions`)

argument	type	optional	default	description
borderWidth	number	true	5	Visible thickness of the splitter borders between layout items in pixels.
borderGrabWidth	number	true	5	The invisible hit-test area around borders to facilitate easy mouse/touch grabbing.
defaultMinItemHeight	string	true	‘0px’	The default minimum height an item can be resized to (supports units e.g. `‘100px’`).
defaultMinItemWidth	string	true	‘10px’	The default minimum width an item can be resized to (supports units e.g. `‘150px’`).
headerHeight	number	true	20	Height of the tab header bar in pixels.
dragProxyWidth	number	true	300	Width of the floating proxy element displayed during a tab/panel drag operation.
dragProxyHeight	number	true	200	Height of the floating proxy element displayed during a tab/panel drag operation.

openPopouts (`PopoutLayoutConfig[]`)

An optional array of popout window configurations persisted by

layout.saveLayout(). When passed back into layout.loadLayout(), Strelit UI Kit automatically restores detached auxiliary windows to their previous monitor coordinates and sizes.

root (RootItemConfig)

settings (LayoutConfigSettings)

header (LayoutConfigHeader)

dimensions (LayoutConfigDimensions)

openPopouts (PopoutLayoutConfig[])

root (`RootItemConfig`)

settings (`LayoutConfigSettings`)

header (`LayoutConfigHeader`)

dimensions (`LayoutConfigDimensions`)

openPopouts (`PopoutLayoutConfig[]`)