Layout Configuration (`LayoutConfig`)

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.

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 →