建立工作區

Blockly 工作區是 Blockly 的最高層級元件，這種使用者介面 讓您用區塊編寫程式

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

注入 div

您必須將 Blockly 工作區插入至 <div> (稱為「插入」) div"。

插入 div 的大小可以靜態調整，或者 動態調整設定。div 中的區塊元素會 會隨著視窗大小調整

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

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

注射避孕針

插入功能會建立組成 HTML 子元素 UI 的所有 HTML 子元素 工作區還會執行取得工作區所需的所有初始化作業 立即可用

插入函式可以採用插入 div 的 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 */ });

設定

工作區具有許多選項 (例如版面配置和樣式) 插入的映像檔數量

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