工作区创建

Blockly 工作区是 Blockly 的最高层级组件。这是您使用块进行编程的界面。

如需详细了解工作区及其子组件,请参阅可视化术语表

注入 div

必须将 Blockly 工作区注入到 <div>(称为“注入 div”)。

注入 div 可以静态动态调整大小。当窗口大小调整时,div 中的块级元素会更新其大小。

以下代码段展示了静态大小的注入 div 的 HTML:

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

避孕针

注入会创建构成工作区界面的所有 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 */ });

配置

可以在注入期间为工作区配置多种选项(如布局和样式)。

如需详细了解配置选项,请参阅配置选项