golden-layout

ui-component layout

golden-layoutは、ウェブアプリケーションでマルチスクリーンレイアウトを実装するためのJavaScriptレイアウトマネージャーです。このライブラリを使用すると、柔軟なドラッグアンドドロップインターフェースを通じてユーザーがレイアウトを動的に調整できます。

Latest Ver 2.6.0
Homepage
Github
0
6,418
📢 golden-layoutは、ウェブアプリケーションで複雑なマルチスクリーンレイアウトを簡単に実装できるJavaScriptライブラリです。
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();
⚡ Top Tools for Developers
Text Compare

テキスト比較

2つのテキストの違いを一目で確認できます。

Favicon Generator

Faviconジェネレーター

簡単かつ迅速にファビコンを生成します。

Lorem Ipsum Generator

Lorem Ipsumジェネレーター

デザイン用のダミーテキストを生成します。

Character Counter

文字数カウント

文字数と単語数をリアルタイムで確認できます。

SRT ↔ SMI

SRT ↔ SMI変換ツール

字幕形式を簡単に変換できます。

Text Extract(OCR)

画像テキスト抽出

画像内のテキストを自動で抽出します。