GoldenLayout Sandbox

by David Kyle

HTML

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
<link rel="stylesheet" href="//golden-layout.com/files/latest/css/goldenlayout-base.css">
<link rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-light-theme.css">

JavaScript

var config = {
  content: [{
    type: 'row',
    content: [
        {
        type:'component',
        componentName: 'Ticker',
        componentState: { text: 'Component 1' }
        },
      {
        type:'component',
        componentName: 'example',
        componentState: { text: 'Component 2' }
        },
      {
      	type: 'column',
        content: [
        	{
        		type:'component',
        		componentName: 'example',
        		componentState: { text: 'Component 3' }
        	},
        	{
        		type:'component',
            	componentName: 'example',
            	componentState: {text: 'Component 4'}
        	}]
       }
    ]
  }]
};

var myLayout = new GoldenLayout( config );

myLayout.registerComponent( 'Ticker', function( container, state ){
  container.getElement().html( '<h2>' + state.text + '</h2>');
});
myLayout.registerComponent( 'example', function( container, state) {
	container.getElement().html('<p>' + state.text + '</p>');
})

myLayout.init();