建立工作區

Blockly 工作區是 Blockly 的最高等級元件，也就是您用來編寫區塊的 UI。

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

注射 div

區塊工作區必須「插入」至 <div> (稱為「插入 div」)。

插入 div 可以靜態或動態調整大小。div 中的區塊元素會在視窗大小調整時更新其大小。

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

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

注射避孕針

插入功能會建立構成工作區 UI 的所有 HTML 子元素。此外，這個步驟也會執行取得工作區所需的所有初始化作業。

插入函式可採用插入 div 的 ID，或插入 div 本身：

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

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

設定

您可以在插入期間設定工作區，使用多個選項 (例如版面配置和樣式)。

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