작업공간 생성

Blockly 작업공간은 Blockly의 최상위 구성요소입니다. 그 UI가 바로 블록으로 프로그래밍하는 데 사용됩니다.

작업공간 및 하위 구성요소에 대한 자세한 내용은 시각 자료 용어집을 참조하세요.

삽입 div

Blockly 작업공간은 '삽입'이라고 하는 <div>`에 삽입해야 합니다. div'로 설정합니다.

삽입 div는 정적으로 또는 동적으로 설정해야 합니다. div 내의 블록 요소가 창 크기가 조절될 때 크기를 조절합니다.

다음 코드 스니펫은 정적 크기가 지정된 삽입 div의 HTML을 보여줍니다.

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

피임 주사

임베딩은 API의 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 */ });

구성

작업공간은 다양한 옵션 (예: 레이아웃 및 스타일)으로 구성할 수 있습니다. 주입 중에.

구성 옵션에 대한 자세한 내용은 다음을 참조하세요. 구성 옵션.