Utwórz obszar roboczy
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Obszar roboczy Blockly to komponent najwyższego poziomu w Blockly. Jest to interfejs, w którym programujesz za pomocą bloków.
Więcej informacji o przestrzeni roboczej i jej podzespołach znajdziesz w słowniku wizualnym.
Blok wstrzykiwania
Obszar roboczy Blockly musi być wstrzyknięty do elementu <div>
, zwanego „injection div”.
Wstawienie div
może mieć rozmiar statyczny lub dynamiczny. Elementy Blockly w div
zmieniają rozmiar, gdy zmieniasz rozmiar okna.
Poniższy fragment kodu pokazuje kod HTML wstawienia o statycznym rozmiarze:div
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
Zastrzyk
Wstrzykiwanie tworzy wszystkie elementy podrzędne HTML, które składają się na interfejs obszaru roboczego. Przeprowadza też całą inicjację potrzebną do przygotowania obszaru roboczego do użycia.
Funkcja wstawiania może przyjmować identyfikator wstawienia div
lub samo wstawienie div
:
// Passes the ID.
const workspace = Blockly.inject('blocklyDiv', { /* config */ });
// Passes the injection div.
const workspace = Blockly.inject(
document.getElementById('blocklyDiv'), { /* config */ });
Konfiguracja
Podczas wstawiania obszar roboczy można skonfigurować za pomocą wielu opcji (takich jak układ i styl).
Więcej informacji o opcjach konfiguracji znajdziesz w artykule Opcje konfiguracji.
O ile nie stwierdzono inaczej, treść tej strony jest objęta licencją Creative Commons – uznanie autorstwa 4.0, a fragmenty kodu są dostępne na licencji Apache 2.0. Szczegółowe informacje na ten temat zawierają zasady dotyczące witryny Google Developers. Java jest zastrzeżonym znakiem towarowym firmy Oracle i jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-09-11 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2025-09-11 UTC."],[],["Blockly workspaces, the UI for block programming, are injected into a designated `\u003cdiv\u003e` element called the \"injection div.\" This div can have a fixed or dynamic size, with Blockly elements resizing accordingly. Injection initializes the workspace UI and readies it for use. The `Blockly.inject()` function, which creates the workspace, accepts either the injection div's ID or the div itself. Workspace configuration, including layout and style, is set during the injection process.\n"]]