Ein Arbeitsbereichskommentar ist ein grafisches Element, in das Sie Text eingeben können. Normalerweise wird es verwendet, um Dinge zu Ihrem Code zu dokumentieren, genau wie Kommentare in einer textbasierten Programmiersprache.
Kommentare zum Arbeitsbereich aktivieren
Um Arbeitsbereichskommentare in Ihrer Anwendung zu aktivieren, müssen Sie Nutzern eine Möglichkeit geben, sie zu erstellen. Eine Möglichkeit besteht darin, ein Kontextmenüelement hinzuzufügen, das einen Kommentar zum Arbeitsbereich erstellt. Mit dem folgenden Code können Sie Standard-Kontextmenüelemente registrieren, um Arbeitsbereichskommentare zu erstellen, zu löschen und zu duplizieren:
// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();
Sie können auch Ihre eigenen Kontextmenüoptionen erstellen oder dem Nutzer eine weitere Möglichkeit hinzufügen, Kommentare zum Arbeitsbereich hinzuzufügen. Weitere Informationen zu Kontextmenüoptionen finden Sie unter Kontextmenüs.
Kommentare visuell anpassen
Es gibt mehrere Möglichkeiten, das Design von Workspace-Kommentaren anzupassen. Sie verwenden CSS und keine Designs. Sie können die meisten Farben und Größen der verschiedenen Teile des Kommentars steuern, aber nicht ihre Position.
Farb-CSS-Variablen
Sie können die CSS-Variable commentFillColour festlegen, um die Hintergrundfarbe des Textbereichs zu ändern. Sie können die CSS-Variable commentBorderColour festlegen, um die Farbe der oberen Kommentarleiste und des Rahmens des Kommentars zu ändern.
.blocklyWorkspace {
--commentFillColour: blue;
--commentBorderColour: red;
}
CSS-Klassen
Den Elementen der Kommentaransicht sind verschiedene CSS-Klassen zugewiesen, mit denen Sie den Stil der Elemente ändern können.
| CSS-Klassen | Bild |
|---|---|
| „blocklyComment“ und „blocklyDraggable“ | 
|
| „blocklySelected“, „blocklyCommentHighlight“ |  
|
| blocklyCollapsed |  |
| blocklyCommentTopbar |  |
| blocklyFoldoutIcon |  |
| blocklyCommentPreview, blocklyText | 
|
| blocklyDeleteIcon |  |
| blocklyText |  |
| blocklyResizeHandle |  |
Grundlegende Verwendung von CSS
In den meisten Fällen können Sie Ihre benutzerdefinierten Attribute mit der entsprechenden CSS-Klasse anwenden:
.blocklyCommentTopbarBackground {
height: 50px;
}
CSS für Text
Bei Text müssen Sie jedoch spezifischer sein, um den vom Renderer generierten CSS zu überschreiben.
/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
fill: blue;
}
/* Modifies the input text. */
.blocklyComment .blocklyText {
color: blue;
}
Preisvergleichsportal für ausgewählte Highlights
Um den ausgewählten Kommentar hervorzuheben, sollte das CSS-Objekt auf Änderungen angewendet werden, je nachdem, ob der Kommentar minimiert ist oder nicht. Wenn sie minimiert ist, wenden Sie die CSS auf blocklyCommentTopbarBackground an, andernfalls auf blocklyCommentHighlight.
/* Highlight when expanded. */
.blocklySelected .blocklyCommentHighlight {
stroke: #fc3;
stroke-width: 3px;
}
/* Hide normal highlight when collapsed. */
.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
stroke: none;
}
/* Instead apply the collapsed highlight to the top bar. */
.blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
stroke: #fc3;
stroke-width: 3px;
}
Symbole
Die Klassen blocklyFoldoutIcon, blocklyDeleteIcon und blocklyResizeHandle werden alle auf <image>-Elemente angewendet. Wenn Sie also die Farbe oder Form eines Symbols ändern möchten, können Sie dem Medienordner ein anderes Bild hinzufügen.
| Image-Name | Bild |
|---|---|
| Foldout-Pfeil.svg | |
| Löschen-Symbol.svg | |
| resize-handle.svg | |
Symbol "Löschen"
Das Löschsymbol ist standardmäßig ausgeblendet. Wenn Sie sie aktivieren möchten, müssen Sie CSS verwenden, um sie sichtbar zu machen:
.blocklyDeleteIcon {
display: block;
}