類別外觀

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

類別 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}

主題

主題可讓您一次指定工作區的所有顏色，包括類別的顏色。如需更精細的控制，請使用 CSS。

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

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>

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