ENG
  • KOR
  • ENG
  • JPN

golden-layout

ui-component layout

golden-layout은 웹 애플리케이션에서 다중 화면 레이아웃을 구현할 수 있게 해주는 자바스크립트 레이아웃 매니저입니다. 이 라이브러리를 사용하면 유연한 드래그 앤 드롭 인터페이스를 통해 사용자가 레이아웃을 동적으로 조정할 수 있습니다.

Latest Ver 2.6.0
Homepage
Github
0
6,418
📢 golden-layout은 웹 애플리케이션에서 복잡한 멀티 스크린 레이아웃을 쉽게 구현할 수 있게 해주는 자바스크립트 라이브러리입니다.

CDN 다운로드

License: MIT
전체 버전 보기
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

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요. 
📄 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는 웹 페이지의 요소들을 격자형태로 유동적으로 배치할 수 있는 JavaScript 라이브러리입니다.

Library Icon
react-grid-layout

React-grid-layout은 사용자가 드래그하고 크기를 조정할 수 있는 반응형 그리드 레이아웃을 제공합니다.

⚡ Top Tools for Developers
Text Compare

텍스트 비교

두 텍스트의 차이점을 한눈에 확인하세요.

Favicon Generator

Favicon 생성기

파비콘을 쉽고 빠르게 생성하세요.

Lorem Ipsum Generator

Lorem Ipsum 생성기

디자인을 위한 더미 텍스트를 생성하세요.

Character Counter

글자수 세기

글자 수와 단어 수를 실시간으로 확인하세요.

SRT ↔ SMI

SRT ↔ SMI 변환기

자막 형식을 간편하게 변환합니다.

Text Extract(OCR)

이미지 텍스트 추출

이미지 속 텍스트 자동 추출