Layout Configuration

var layout = new StrelitLayout({
    settings:{
        hasHeaders: true,
        constrainDragToContainer: true,
        reorderEnabled: true,
        selectionEnabled: false,
        popoutWholeStack: false,
        blockedPopoutsThrowError: true,
        closePopoutsOnUnload: true,
        showPopoutIcon: true,
        showMaximiseIcon: true,
        showCloseIcon: true
    },
    dimensions: {
        borderWidth: 5,
        minItemHeight: 10,
        minItemWidth: 10,
        headerHeight: 20,
        dragProxyWidth: 300,
        dragProxyHeight: 200
    },
    labels: {
        close: 'close',
        maximise: 'maximise',
        minimise: 'minimise',
        popout: 'open in new window'
    },
    content: [ /* see item config */ ]
});

settings

argument	type	optional	default	description
hasHeaders	Boolean	true	true	Turns headers on or off. If false, the layout will be displayed with splitters only.
constrainDragToContainer	Boolean	true	true	Constrains the area in which items can be dragged to the layout's container. Will be set to false automatically when `layout.createDragSource()` is called.
reorderEnabled	Boolean	true	true	If true, the user can re-arrange the layout by dragging items by their tabs to the desired location.
selectionEnabled	Boolean	true	false	If true, the user can select items by clicking on their header. This sets the value of layout.selectedItem to the clicked item, highlights its header and the layout emits a 'selectionChanged' event.
popoutWholeStack	Boolean	true	false	Decides what will be opened in a new window if the user clicks the popout icon. If true the entire stack will be transferred to the new window, if false only the active component will be opened.
blockedPopoutsThrowError	Boolean	true	true	Specifies if an error is thrown when a popout is blocked by the browser (e.g. by opening it programmatically). If false, the popout call will fail silently.
closePopoutsOnUnload	Boolean	true	true	Specifies if all popouts should be closed when the page that created them is closed. Popouts don't have a strong dependency on their parent and can exist on their own, but can be quite annoying to close by hand. In addition, any changes made to popouts won't be stored after the parent is closed.
showPopoutIcon	Boolean	true	true	Specifies if the popout icon should be displayed in the header-bar.
showMaximiseIcon	Boolean	true	true	Specifies if the maximise icon should be displayed in the header-bar.
showCloseIcon	Boolean	true	true	Specifies if the close icon should be displayed in the header-bar.

dimensions

argument	type	optional	default	description
borderWidth	Number	true	5	The width of the borders between the layout items in pixel. Please note: The actual draggable area is wider than the visible one, making it safe to set this to small values without affecting usability.
minItemHeight	Number	true	10	The minimum height an item can be resized to (in pixel).
minItemWidth	Number	true	10	The minimum width an item can be resized to (in pixel).
headerHeight	Number	Number	20	The height of the header elements in pixel. This can be changed, but your theme's header css needs to be adjusted accordingly.
dragProxyWidth	Number	true	300	The width of the element that appears when an item is dragged (in pixel).
dragProxyHeight	Number	true	200	The height of the element that appears when an item is dragged (in pixel).

labels

argument	type	optional	default	description
close	String	true	'close'	The tooltip text that appears when hovering over the close icon.
maximise	String	true	'maximise'	The tooltip text that appears when hovering over the maximise icon.
minimise	String	true	'minimise'	The tooltip text that appears when hovering over the minimise icon.
popout	String	true	'open in new window'	The tooltip text that appears when hovering over the popout icon.

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 →