Golden Layout

GoldenLayout is a multi-window javascript layout manager for webapps.

info

For more details, refer to GoldenLayout page.

Create Panes

You can create panes and customize it as below.

Add Panes

You can add panes to GoldenLayout with settings tab. Just write the name of the pane you want to create and place it where you want.

Customize Panes

Now you can customize panes as you wish.

Change Panes Place

If you want to change pane place while you are designing and blocked by the components wrapper, you can always close the wrappers with a click.

Popout/Popin Panes

You can popout/popin panes with the popout button in the pane. And You can position the panes where you think they are most comfortable to work with.

Get The List Of Closed Panes

You can get the list of closed panes with GoldenLayoutQID.getClosedPanes() method. this method returns the list of pane names that were closed in runtime.

Open Back Closed Panes - createChildren()

If you close the panes with the close button at runtime and want to open them back, you can use the Quick.createChildren() method. Note that you must have created this pane before in design mode to do this.

Example file:

createClosedPanes

You can also create Dynamic Childeren with template child.

Example file:

createChildren

Props

width
Sets the outer width of the layout.

height Sets the outer height of the layout.

dimensions
Dimensions property takes 6 arguments which are borderWidth, minItemHeight, minItemWidth, headerHeight, dragProxyWidth, and dragProxyHeight. This property helps to manage layout configuration.

borderWidth
borderWidth argument sets the width of the borders between layout items. (type: number, default: 5)

minItemHeight minItemWidth
minItemHeight and minItemWidth arguments set a limit to the items' width and height when resizing on the layout items occurs. (type: number, default: 10)

headerHeight
headerHeight argument adjusts the height of the header elements. (type: number, default: 20)

dragProxyWidth dragProxyHeight
dragProxyWidth and dragProxyHeight arguments help adjust the height and the width of a layout item when an item is dragged.

dragProxyWidth: (type: number, default: 300)
dragProxyHeight: (type: number, default: 200)
{dragProxyWidth = '300px', dragProxyHeight = '200px'}

Events

activeContentItemChanged(contentItem?object)
The event takes contentItem as a parameter and fired whenever a different item is selected from the stack.

paneClosed(childName:string)

The event takes childName as a parameter and fired whenever an item is deleted.

paneCreated(childName:string)

The event takes childName as a parameter and fired whenever an item is added.

Methods

getClosedPanes() : any[]
You can get the list of closed panes with getClosedPanes() method. this method returns the list of pane names that were closed in runtime.

getConfig()
Get config of golden layout.

setConfig( val: any )
set config of golden layout.

changeTitle( childName: string, newTitle: string )
The items' titles can be set to the provided value using the changeTitle method.

closeChildWindows()
Closes all GoldenLayout windows.

Component Samples

goldenLayout