类别外观

Blockly 提供默认的类别界面，并提供一些基本的样式设置选项。如果您想了解如何对界面进行更高级的样式设置/配置，请查看自定义 Blockly 工具箱 Codelab和 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>

请注意，我们还支持使用可本地化的颜色引用。