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: [ ]
});
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. |
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). |
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. |
Comments and Questions