Darstellung der Kategorie

Blockly bietet eine Standard-UI für Kategorien und damit einige grundlegende Optionen für das Styling. Wenn Sie Informationen zum erweiterten Anpassen der Benutzeroberfläche benötigen, sehen Sie sich das Codelab zum Anpassen einer Blockly-Toolbox und den Vortrag zu den Toolbox-APIs von 2021 an.

Eine Kategorie-Toolbox mit sechs Kategorien. Die Kategorie „Variablen“ ist geöffnet und enthält Getter- und Setter-Blöcke für Variablen. Die Farbe der Blöcke entspricht der Farbe des vertikalen Balkens links neben dem Namen der Kategorie „Variablen“.

Kategorie-Preisvergleichsportal

Sie können CSS verwenden, um Kategorie-Toolboxen zu gestalten. Der Eintrag für jede Kategorie ist in mehrere Teile unterteilt, z. B. in das Symbol, das Label und die Zeile mit dem Symbol und dem Label. Sie können jeden Teil einzeln gestalten.

Standardmäßig wird allen Teilen desselben Typs (z.B. allen Labels) dieselbe CSS-Klasse zugewiesen. Verwenden Sie diese Klasse, wenn Sie alle Teile desselben Typs auf dieselbe Weise gestalten möchten. Sie möchten beispielsweise, dass alle Labels dieselbe Farbe haben.

Sie können auch jedem einzelnen Teil eine eigene CSS-Klasse zuweisen. Verwenden Sie diese Methode, wenn Sie einzelne Teile unterschiedlich gestalten möchten. Sie möchten beispielsweise, dass jedes Label eine eigene Farbe hat.

In der folgenden Tabelle sind die Typen, Beschreibungen und Standard-CSS-Klassen der einzelnen Teile einer Kategorie-Toolbox aufgeführt. Wenn Sie sich das nicht richtig vorstellen können, öffnen Sie die Entwicklertools in Ihrem Browser und sehen Sie sich die Toolbox an.

Teiltyp Beschreibung Standard-CSS-Klasse
Inhalte Die div, die alle Kategorien enthält. blocklyToolboxCategoryGroup
Container Die div, die eine einzelne Kategorie und ihre Unterkategorien enthält. blocklyToolboxCategoryContainer
Zeile Das div, das die Kategorie enthält. blocklyToolboxCategory
rowcontentcontainer Das div, das das Label und das Symbol enthält. blocklyTreeRowContentContainer
Symbol Das span, das das Symbol enthält. blocklyToolboxCategoryIcon
Label Das span, das das Label enthält. blocklyToolboxCategoryLabel
ausgewählt Wird der Zeile div hinzugefügt, wenn die Kategorie ausgewählt ist. blocklyToolboxSelected
openicon Wird dem Symbol span hinzugefügt, wenn eine Kategorie mit Unterkategorien geöffnet ist. blocklyToolboxCategoryIconOpen
closedicon Wird dem span-Symbol hinzugefügt, wenn eine Kategorie mit Unterkategorien geschlossen wird. blocklyToolboxCategoryIconClosed

Angenommen, Sie möchten, dass alle Labels weiß sind, die Zeile jeder Kategorie aber eine eigene Hintergrundfarbe hat. Dazu benötigen Sie benutzerdefinierte CSS-Klassen für jede Zeile. Sie können die Standardklasse für die Labels verwenden.

Eine Toolbox mit zwei Kategorien. Die Kategorielabels sind beide weiß, aber ihre Hintergrundfarben sind unterschiedlich.

Weisen Sie zuerst benutzerdefinierte CSS-Klassen in der JSON- oder XML-Datei zu, in der Ihre Kategorien definiert sind:

JSON

Legen Sie benutzerdefinierte CSS-Klassen mit der Eigenschaft cssConfig fest.

{
  "kind": "category",
  "name": "My category",
  "cssConfig": {
    "row": "myRow"  // Use the part type ("row") as a key.
  },
  "contents": [...],
},
{
  "kind": "category",
  "name": "Your category",
  "cssConfig": {
    "row": "yourRow"
  },
  "contents": [...],
},

XML

Legen Sie benutzerdefinierte CSS-Klassen mit einem Attribut fest, dessen Name der Teiltyp mit vorangestelltem css- ist.

<category name="My category" css-row="myRow">
  ...
</category>
<category name="Your category" css-row="yourRow">
  ...
</category>

Verwenden Sie in Ihrer CSS-Datei die benutzerdefinierten Klassen, um Zeilenfarben zuzuweisen, und die Standardklasse, um die Label-Farbe zuzuweisen:

.myRow {background-color: green}
.yourRow {background-color: red}
.blocklyToolboxCategoryLabel {color: white}

Designs

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

Dazu müssen Sie Ihre Kategorie einem bestimmten Kategorietyp zuordnen:

JSON

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

XML

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

Farben

Sie können die Farbe auch direkt angeben. Das wird jedoch nicht empfohlen. Die Farbe ist eine als String dargestellte Zahl (0–360), die den Farbton angibt. Beachten Sie die britische Schreibweise.

JSON

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

XML

<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>

Wir unterstützen auch die Verwendung lokalisierbarer Farbverweise.