類別外觀

Blockly 提供預設類別 UI，以及一些基本的樣式設定選項。如要進一步瞭解如何進階設定 UI 樣式/設定，請參閱「自訂 Blockly 工具箱程式碼研究室」和「2021 年工具箱 API 講座」。

包含六個類別的類別工具箱。「變數」類別已開啟，並包含變數 getter 和 setter 區塊。積木的顏色會與「變數」類別名稱左側直條的顏色相符。

類別 CSS

您可以使用 CSS 設定類別工具箱的樣式。每個類別的項目都會分成多個部分，例如圖示、標籤，以及包含圖示和標籤的資料列。您可以個別設定每個部分的樣式。

根據預設，系統會為相同類型的所有部分 (例如所有標籤) 指派相同的 CSS 類別。如要以相同方式設定同一類型所有部分的樣式，請使用這個類別。舉例來說，您希望所有標籤都使用相同顏色。

你也可以為每個個別部分指派專屬的 CSS 類別。如要以不同方式設定個別部分的樣式，請使用這個方法。舉例來說，您希望每個標籤都有自己的顏色。

下表列出類別工具箱各部分的類型、說明和預設 CSS 類別。如果難以想像，請在瀏覽器中開啟開發人員工具，並檢查工具箱。

零件類型 說明 預設 CSS 類別
內容 包含所有類別的 div。 blocklyToolboxCategoryGroup
容器 包含單一類別及其子類別的 div。 blocklyToolboxCategoryContainer
列 包含類別的 div。 blocklyToolboxCategory
rowcontentcontainer 包含標籤和圖示的 div。 blocklyTreeRowContentContainer
圖示 包含圖示的 span。 blocklyToolboxCategoryIcon
標籤 包含標籤的 span。 blocklyToolboxCategoryLabel
已選取 選取類別後，會新增至「列」div。 blocklyToolboxSelected
openicon 新增至「圖示」span，開啟含有子類別的類別時會顯示。 blocklyToolboxCategoryIconOpen
closedicon 當含有子類別的類別關閉時，會新增至「圖示」span。 blocklyToolboxCategoryIconClosed

舉例來說，假設您希望所有標籤都是白色，但每個類別的資料列都有自己的背景顏色。如要這麼做，您需要為每一列設定自訂 CSS 類別。標籤可以使用預設類別。

工具箱分為兩類。兩個類別標籤都是白色，但背景顏色不同。

首先，請在定義類別的 JSON 或 XML 中指派自訂 CSS 類別：

JSON

使用 cssConfig 屬性設定自訂 CSS 類別。

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

使用屬性設定自訂 CSS 類別，屬性名稱為加上 css- 前置字元的零件類型。

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

在 CSS 檔案中，使用自訂類別指派列顏色，並使用預設類別指派標籤顏色：

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

主題

主題可讓您一次指定工作區的所有顏色，包括類別的顏色。

如要使用這些屬性，必須將類別與特定類別樣式建立關聯：

JSON

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

XML

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

顏色

你也可以直接指定顏色，但不建議這麼做。顏色是字串化的數字 (0 到 360)，用於指定色調。請注意這是英式拼法。

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>

請注意，我們也支援使用可本地化的顏色參照。