ENG
  • KOR
  • ENG
  • JPN

golden-layout

ui-component layout

golden-layout is a JavaScript layout manager that facilitates multi-screen layouts for web applications. It allows users to dynamically adjust layouts using a flexible drag-and-drop interface.

Latest Ver 2.6.0
Homepage
Github
0
6,418
📢 golden-layout is a JavaScript library that simplifies the creation of complex multi-screen layouts in web applications.

CDN Download

License: MIT
View All Versions
https://cdnjs.cloudflare.com/ajax/libs/golden-layout/2.6.0/cjs/index.js
https://cdnjs.cloudflare.com/ajax/libs/golden-layout/2.6.0/cjs/index.min.js
https://cdnjs.cloudflare.com/ajax/libs/golden-layout/2.6.0/cjs/ts/config/config.js
https://cdnjs.cloudflare.com/ajax/libs/golden-layout/2.6.0/cjs/ts/config/config.min.js
https://cdnjs.cloudflare.com/ajax/libs/golden-layout/2.6.0/cjs/ts/config/resolved-config.js
https://cdnjs.cloudflare.com/ajax/libs/golden-layout/2.6.0/cjs/ts/config/resolved-config.min.js
https://cdnjs.cloudflare.com/ajax/libs/golden-layout/2.6.0/cjs/ts/container/component-container.js
https://cdnjs.cloudflare.com/ajax/libs/golden-layout/2.6.0/cjs/ts/container/component-container.min.js
https://cdnjs.cloudflare.com/ajax/libs/golden-layout/2.6.0/cjs/ts/controls/browser-popout.js
https://cdnjs.cloudflare.com/ajax/libs/golden-layout/2.6.0/cjs/ts/controls/browser-popout.min.js

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment. 
📄 HTML
<div id="layoutContainer" style="width: 100%; height: 100%;"></div><script src="https://cdn.jsdelivr.net/npm/golden-layout@2.3.0/dist/golden-layout.min.js"></script><script>var config = {content: [{type: 'row', content:[{type: 'component', componentName: 'exampleComponent', componentState: {label: 'Component 1'}}]}]};var myLayout = new GoldenLayout(config, document.getElementById('layoutContainer'));myLayout.registerComponent('exampleComponent', function(container, componentState) {container.getElement().html('<h2>' + componentState.label + '</h2>');});myLayout.init();</script>

🎨 External CSS
<link href="https://cdn.jsdelivr.net/npm/golden-layout@2.3.0/dist/css/golden-layout-base.css" rel="stylesheet">

🧩 External JS
<script src="https://cdn.jsdelivr.net/npm/golden-layout@2.3.0/dist/golden-layout.min.js"></script>

⚙️ JavaScript
var config = {content: [{type: 'row', content:[{type: 'component', componentName: 'exampleComponent', componentState: {label: 'Component 1'}}]}]};var myLayout = new GoldenLayout(config, document.getElementById('layoutContainer'));myLayout.registerComponent('exampleComponent', function(container, componentState) {container.getElement().html('<h2>' + componentState.label + '</h2>');});myLayout.init();

Related Libraries

Library Icon
masonry

Masonry is a JavaScript library for dynamically arranging elements in a grid pattern on web pages.

Library Icon
react-grid-layout

React-grid-layout offers a responsive grid layout that users can drag and resize.

⚡ Top Tools for Developers
Text Compare

Text Comparison

Easily spot the differences between two texts.

Favicon Generator

Favicon Generator

Quickly and easily generate favicons.

Lorem Ipsum Generator

Lorem Ipsum Generator

Generate placeholder text for your designs.

Character Counter

Character Counter

Check character and word count in real time.

SRT ↔ SMI

SRT ↔ SMI Converter

Easily convert between subtitle formats.

Text Extract(OCR)

Image Text Extractor

Automatically extract text from images.