Layout Configuration

var layout = new GoldenLayout({
    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

argumenttypeoptionaldefaultdescription
hasHeadersBooleantruetrueTurns headers on or off. If false, the layout will be displayed with splitters only.
constrainDragToContainerBooleantruetrueConstrains the area in which items can be dragged to the layout's container. Will be set to false automatically when layout.createDragSource() is called.
reorderEnabledBooleantruetrueIf true, the user can re-arrange the layout by dragging items by their tabs to the desired location.
selectionEnabledBooleantruefalseIf 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.
popoutWholeStackBooleantruefalseDecides 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.
blockedPopoutsThrowErrorBooleantruetrueSpecifies 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.
closePopoutsOnUnloadBooleantruetrueSpecifies 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.
showPopoutIconBooleantruetrueSpecifies if the popout icon should be displayed in the header-bar.
showMaximiseIconBooleantruetrueSpecifies if the maximise icon should be displayed in the header-bar.
showCloseIconBooleantruetrueSpecifies if the close icon should be displayed in the header-bar.

 

dimensions

argumenttypeoptionaldefaultdescription
borderWidthNumbertrue5The 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.
minItemHeightNumbertrue10The minimum height an item can be resized to (in pixel).
minItemWidthNumbertrue10The minimum width an item can be resized to (in pixel).
headerHeightNumberNumber20The height of the header elements in pixel. This can be changed, but your theme's header css needs to be adjusted accordingly.
dragProxyWidthNumbertrue300The width of the element that appears when an item is dragged (in pixel).
dragProxyHeightNumbertrue200The height of the element that appears when an item is dragged (in pixel).

 

labels

argumenttypeoptionaldefaultdescription
closeStringtrue'close'The tooltip text that appears when hovering over the close icon.
maximiseStringtrue'maximise'The tooltip text that appears when hovering over the maximise icon.
minimiseStringtrue'minimise'The tooltip text that appears when hovering over the minimise icon.
popoutStringtrue'open in new window'The tooltip text that appears when hovering over the popout icon.

Comments and Questions

comments powered by Disqus