Aparência da categoria

O Blockly oferece uma interface de categorias padrão e, com ela, algumas opções básicas de estilo. Se você quiser informações sobre como fazer um estilo/configuração mais avançado da interface, confira o codelab Personalizar uma caixa de ferramentas do Blockly e a palestra sobre as APIs da Toolbox de 2021.

Temas

Os temas permitem especificar todas as cores do seu espaço de trabalho de uma vez, incluindo as cores das categorias.

Para usá-los, você precisa associar sua categoria a um estilo específico:

JSONXML

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

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

Cores

Também é possível especificar a cor diretamente, mas isso não é recomendado. A cor é um número convertido em string (0 a 360) que especifica a tonalidade. Observe a grafia britânica.

JSONXML

{
  "contents": [
    {
      "kind": "category",
      "name": "Logic",
      "colour": "210"
    },
    {
      "kind": "category",
      "name": "Loops",
      "colour": "120"
    }
  ]
}

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

Também é possível usar referências de cores localizáveis.

CSS da categoria

Se você quiser uma personalização mais poderosa, o Blockly também permite especificar classes CSS para diferentes elementos da interface padrão. Em seguida, use o CSS para estilizar esses elementos.

As classes CSS podem ser aplicadas aos seguintes tipos de elementos:

• container: a classe da div pai da categoria. blocklyToolboxCategory padrão.
• row: a classe para o div que contém o rótulo e o ícone da categoria. blocklyTreeRow padrão.
• icon: a classe do ícone de categoria. blocklyTreeIcon padrão.
• label: a classe do rótulo da categoria. blocklyTreeLabel padrão.
• selected: a classe que é adicionada à categoria quando ela é selecionada. blocklyTreeSelected padrão.
• openicon: a classe adicionada a um ícone quando a categoria tem categorias aninhadas e está aberta. blocklyTreeIconOpen padrão.
• closedicon: a classe adicionada a um ícone quando a categoria tem categorias aninhadas e está fechada. blocklyTreeIconClosed padrão.

E aqui está como especificar as classes usando qualquer formato:

JSONXML

Defina a classe CSS de um tipo de elemento específico usando a propriedade cssConfig.

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

Defina a classe CSS de um tipo de elemento específico precedida por "css-".

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