建立工作區

Blockly 工作區是 Blockly 的最高層級元件。您可以使用這個 UI 以積木程式設計。

如要進一步瞭解工作區及其子元件，請參閱視覺化詞彙表。

插入 div

Blockly 工作區必須插入至 <div> 中，也就是「插入 div」。

注入 div 的大小可以是靜態或動態。視窗大小變更時，div 中的 Blockly 元素會更新大小。

下列程式碼片段顯示靜態大小的插入內容 div 的 HTML：

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

注射

注入作業會建立構成工作區 UI 的所有 HTML 子元素。此外，這個函式也會執行所有必要的初始化作業，讓工作區準備就緒。

注入函式可接受注入的 ID div，或注入的 ID div 本身：

// Passes the ID.
const workspace = Blockly.inject('blocklyDiv', { /* config */ });

// Passes the injection div.
const workspace = Blockly.inject(
    document.getElementById('blocklyDiv'), { /* config */ });

設定

注入期間，工作區可設定多種選項 (例如版面配置和樣式)。

如要進一步瞭解設定選項，請參閱「設定選項」。