類別外觀

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

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

類別 CSS

您可以使用 CSS 設定類別工具箱的樣式。

類別工具箱由多個 HTML 元素組成，每個元素都模擬工具箱的不同部分。舉例來說，每個類別都有自己的 div，且圖示和標籤分別有不同的 span。(如需完整清單，請參閱下表)。

Blockly 會為相同類型的所有部分指派預設的 CSS 類別。舉例來說，這項作業會將 blocklyToolboxCategoryLabel 指派給所有標籤 span。使用這些類別，以相同方式設定相同類型的所有部分，例如為所有標籤指派相同顏色。Blockly 會在類別工具箱的預設 CSS 中使用這些類別。

您可以視需要為個別部分指派自訂 CSS 類別。舉例來說，您可以為每個標籤指派不同的 CSS 類別 span。使用這些類別，以不同方式為同一類型的不同部分設定樣式，例如為每個標籤指派不同顏色。

預設 CSS 類別

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

零件類型 說明 預設 CSS 類別
內容 包含所有類別的 div。 blocklyToolboxCategoryGroup
容器 div，其中包含單一類別及其子類別。 blocklyToolboxCategoryContainer
列 包含類別的 div。 blocklyToolboxCategory
rowcontentcontainer 包含標籤和圖示的 div。 blocklyTreeRowContentContainer
圖示 包含圖示的 span。 blocklyToolboxCategoryIcon
標籤 包含標籤的 span。 blocklyToolboxCategoryLabel

CSS 也用於標示工具箱中某些部分的狀態。

州 說明 預設 CSS 類別
已選取 選取類別後，會新增至「列」div。 blocklyToolboxSelected
openicon 新增至「圖示」span，開啟含有子類別的類別時會顯示。 blocklyToolboxCategoryIconOpen
closedicon 當含有子類別的類別關閉時，會新增至「圖示」span。 blocklyToolboxCategoryIconClosed

自訂 CSS 類別

如要指派自訂 CSS 類別，請在 JSON 工具箱定義中使用 cssConfig 屬性，或在 XML 工具箱定義中使用 css- 屬性，並使用零件類型來識別要指派類別的零件。

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

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

下列類別定義會為每個類別的資料列指派自訂 CSS 類別。請注意，每個定義都包含資料列的預設類別 (blocklyToolboxCategory)。這是因為 Blockly 會在指派類別時覆寫資料列的 class 屬性。如果未加入預設類別，系統就不會提供該類別的預設 CSS。

JSON

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

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

XML

使用屬性設定自訂 CSS 類別，屬性名稱是部分類型，並在前面加上 css-。

<category name="My category" css-row="blocklyToolboxCategory myRow">
  ...
</category>
<category name="Your category" css-row="blocklyToolboxCategory 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>

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