Darstellung der Kategorie

Blockly bietet eine standardmäßige Benutzeroberfläche für Kategorien und damit einige grundlegende Optionen für das Design. Informationen zum Erstellen eines erweiterten Stils und zur Konfiguration der Benutzeroberfläche finden Sie im Codelab zum Anpassen einer Blockly-Toolbox und im Vortrag zu Toolbox APIs 2021.

Designs

Mit Designs können Sie alle Farben Ihres Arbeitsbereichs gleichzeitig festlegen, einschließlich der Farben Ihrer Kategorien.

Wenn Sie sie verwenden möchten, müssen Sie Ihre Kategorie mit einem bestimmten Kategoriestil verknüpfen:

JSONXML

{
  "kind": "category",
  "name": "Logic",
  "categorystyle": "logic_category"
}

<category name="Logic" categorystyle="logic_category"></category>

Farben

Sie können die Farbe auch direkt angeben, dies wird jedoch nicht empfohlen. „colour“ ist eine als String angegebene Zahl (0–360), die den Farbton angibt. Beachten Sie die britische Schreibweise.

JSONXML

{
  "contents": [
    {
      "kind": "category",
      "name": "Logic",
      "colour": "210"
    },
    {
      "kind": "category",
      "name": "Loops",
      "colour": "120"
    }
  ]
}

<xml id="toolbox" style="display: none">
  <category name="Logic" colour="210">...</category>
  <category name="Loops" colour="120">...</category>
  <category name="Math" colour="230">...</category>
  <category name="Colour" colour="20">...</category>
  <category name="Variables" colour="330" custom="VARIABLE"></category>
  <category name="Functions" colour="290" custom="PROCEDURE"></category>
</xml>

Außerdem werden lokalizable Farbreferenzen unterstützt.

CSS für Kategorie

Wenn Sie die Anpassung noch weiter optimieren möchten, können Sie in Blockly auch CSS-Klassen für verschiedene Elemente der Standard-Benutzeroberfläche angeben. Sie können sie dann mit CSS stylen.

Auf die folgenden Elementtypen können CSS-Klassen angewendet werden:

• container: Die Klasse für das übergeordnete div-Element der Kategorie. Standard: blocklyToolboxCategory.
• row: Die Klasse für das Div-Element, das das Kategorielabel und das Symbol enthält. Standard: blocklyTreeRow.
• icon: Die Klasse für das Kategoriesymbol. Standard blocklyTreeIcon.
• label: Die Klasse für das Kategorielabel. Standard blocklyTreeLabel.
• selected: Die Klasse, die der Kategorie hinzugefügt wird, wenn sie ausgewählt wird. Standard: blocklyTreeSelected.
• openicon: Die Klasse, die einem Symbol hinzugefügt wird, wenn die Kategorie verschachtelte Kategorien hat und geöffnet ist. Standard blocklyTreeIconOpen.
• closedicon: Die Klasse, die einem Symbol hinzugefügt wird, wenn die Kategorie verschachtelte Kategorien hat und geschlossen ist. Standard blocklyTreeIconClosed.

So geben Sie die Klassen mit einem der beiden Formate an:

JSONXML

Legen Sie die CSS-Klasse eines bestimmten Elementtyps mit der Property „cssConfig“ fest.

{
  "kind": "category",
  "name": "...",
  "cssConfig": {
    "container": "yourClassName"
  }
}

Legen Sie die CSS-Klasse eines bestimmten Elementtyps fest, indem Sie „css-“ voranstellen.

<category name="..." css-container="yourClassName"></category>