类别外观

Blockly 提供了默认的类别界面，以及一些基本样式选项。如需了解如何对界面进行更高级的样式设置/配置，请参阅 Customizing a Blockly toolbox codelab 和 2021 Toolbox APIs 讲座。

主题

借助主题，您可以一次性指定工作区的所有颜色，包括类别的颜色。

如需使用这些功能，您必须将类别与特定的类别样式相关联：

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>

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

类别 CSS

如果您想要更强大的自定义功能，Blockly 还允许您为默认界面的不同元素指定 CSS 类。然后，您可以使用 CSS 为这些元素设置样式。

以下元素类型可以应用 CSS 类：

• container - 类别父 div 的类。默认值为 blocklyToolboxCategory。
• row - 包含类别标签和图标的 div 的类。默认值为 blocklyTreeRow。
• icon - 类别图标的类。默认为 blocklyTreeIcon。
• label - 类别标签的类。默认为 blocklyTreeLabel。
• selected - 在类别被选中时添加到该类别的类。默认值为 blocklyTreeSelected。
• openicon - 当类别包含嵌套类别且处于打开状态时，向图标添加的类。默认为 blocklyTreeIconOpen。
• closedicon - 当类别包含嵌套类别且处于关闭状态时，向图标添加的类。默认为 blocklyTreeIconClosed。

下面是使用任一格式指定类的方法：

JSON

使用 cssConfig 属性设置特定元素类型的 CSS 类。

{
  "kind": "category",
  "name": "...",
  "cssConfig": {
    "container": "yourClassName"
  }
}

XML

通过在特定元素类型前面附加“css-”来设置其 CSS 类。

<category name="..." css-container="yourClassName"></category>