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

É possível usar CSS para estilizar caixas de ferramentas de categorias.

Uma caixa de ferramentas de categoria é composta por vários elementos HTML, cada um modelando uma parte diferente da caixa de ferramentas. Por exemplo, cada categoria tem um div e spans separados para o ícone e o rótulo. Para uma lista completa, consulte a tabela abaixo.

O Blockly atribui uma classe CSS padrão a todas as partes do mesmo tipo. Por exemplo, ele atribui blocklyToolboxCategoryLabel a todos os rótulos spans. Use essas classes para estilizar todas as partes do mesmo tipo da mesma maneira, como atribuir a mesma cor a todos os rótulos. O Blockly usa essas classes no CSS padrão para caixas de ferramentas de categoria.

Você também pode atribuir classes CSS personalizadas a partes individuais. Por exemplo, você pode atribuir classes CSS diferentes a cada rótulo span. Use essas classes para estilizar diferentes partes do mesmo tipo de maneiras diferentes, como atribuir uma cor diferente a cada rótulo.

Classes CSS padrão

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

O CSS também é usado para rotular o estado de algumas partes da caixa de ferramentas.

Estado Descrição Classe CSS padrão
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

Classes CSS personalizadas

Para atribuir classes CSS personalizadas, use a propriedade cssConfig em definições de caixa de ferramentas JSON ou atributos css- em definições de caixa de ferramentas XML e use o tipo de parte para identificar a parte a que você quer atribuir classes.

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

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

As definições de categoria a seguir atribuem classes CSS personalizadas à linha de cada categoria. A classe padrão para linhas (blocklyToolboxCategory) está incluída em cada definição. Isso acontece porque o Blockly substitui o atributo class da linha ao atribuir classes. Se você não incluir a classe padrão, não vai receber o CSS padrão dela.

JSON

Defina classes CSS personalizadas usando a propriedade cssConfig.

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

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="blocklyToolboxCategory myRow">
  ...
</category>
<category name="Your category" css-row="blocklyToolboxCategory 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 usá-los, você precisa associar 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.