Aparência da categoria

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

Uma caixa de ferramentas de categoria com seis categorias. A categoria "Variáveis" está aberta e contém blocos getter e setter de variáveis. A cor dos blocos corresponde à cor da barra vertical à esquerda do nome da categoria "Variáveis".

CSS da categoria

É possível usar CSS para estilizar caixas de ferramentas de categorias. A entrada de cada categoria é dividida em várias partes, como o ícone, o rótulo e a linha que contém o ícone e o rótulo. É possível estilizar cada parte individualmente.

Por padrão, todas as partes do mesmo tipo (por exemplo, todos os rótulos) recebem a mesma classe CSS. Use essa classe se quiser estilizar todas as partes do mesmo tipo da mesma maneira. Por exemplo, você quer que todos os rótulos tenham a mesma cor.

Também é possível atribuir a cada parte individual a própria classe CSS. Use esse método se quiser estilizar partes individuais de maneira diferente. Por exemplo, você quer que cada rótulo tenha uma cor própria.

A tabela a seguir lista os tipos, as descrições e as classes CSS padrão de cada parte de uma caixa de ferramentas de categoria. Se você estiver com dificuldade de visualizar isso, abra as ferramentas para desenvolvedores no navegador e inspecione a caixa de ferramentas.

Tipo de peça Descrição Classe CSS padrão
conteúdo O div que contém todas as categorias. blocklyToolboxCategoryGroup
contêiner O div que contém uma única categoria e as subcategorias dela. blocklyToolboxCategoryContainer
linha O div que contém a categoria. blocklyToolboxCategory
rowcontentcontainer O div que contém o rótulo e o ícone. blocklyTreeRowContentContainer
ícone O span que contém o ícone. blocklyToolboxCategoryIcon
o rótulo. O span que contém o rótulo. blocklyToolboxCategoryLabel
selecionado Adicionado à div "linha" quando a categoria é selecionada. blocklyToolboxSelected
openicon Adicionado ao span "ícone" quando uma categoria com subcategorias está aberta. blocklyToolboxCategoryIconOpen
closedicon Adicionado ao span "ícone" quando uma categoria com subcategorias é fechada. blocklyToolboxCategoryIconClosed

Por exemplo, suponha que você queira que todos os rótulos sejam brancos, mas que a linha de cada categoria tenha uma cor de plano de fundo própria. Para isso, você precisa de classes CSS personalizadas para cada linha. Você pode usar a classe padrão para os rótulos.

Uma caixa de ferramentas com duas categorias. Os rótulos de categoria são brancos, mas as cores de fundo são diferentes.

Primeiro, atribua classes CSS personalizadas no JSON ou XML que define suas categorias:

JSON

Defina classes CSS personalizadas usando a propriedade cssConfig.

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

Defina classes CSS personalizadas usando um atributo cujo nome seja o tipo de parte com css- adicionado a ele.

<category name="My category" css-row="myRow">
  ...
</category>
<category name="Your category" css-row="yourRow">
  ...
</category>

No arquivo CSS, use as classes personalizadas para atribuir cores às linhas e a classe padrão para atribuir a cor do rótulo:

.myRow {background-color: green}
.yourRow {background-color: red}
.blocklyToolboxCategoryLabel {color: white}

Temas

Com os temas, é possível especificar todas as cores do seu espaço de trabalho de uma só vez, incluindo as cores das categorias.

Para usar esses estilos, associe sua categoria a um estilo específico:

JSON

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

XML

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

Cores

Você também pode especificar a cor diretamente, mas isso não é recomendado. A cor é um número em string (0 a 360) que especifica a tonalidade. Observe a grafia britânica.

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>

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