Aspecto de las categorías

Blockly proporciona una IU de categorías predeterminada y, con ella, algunas opciones básicas para el diseño. Si quieres obtener información para aplicar estilos o configuraciones más avanzados en la IU, consulta el codelab Customizing a Blockly toolbox y la conferencia de APIs de Toolbox de 2021.

Temas

Los temas te permiten especificar todos los colores de tu espacio de trabajo a la vez, incluidos los colores de tus categorías.

Para usarlos, debes asociar tu categoría con un estilo de categoría en particular:

JSONXML

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

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

Colores

También puedes especificar el color directamente, pero no se recomienda. El color es un número convertido en cadena (de 0 a 360) que especifica el tono. Ten en cuenta la ortografía 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>

Ten en cuenta que también admitimos el uso de referencias de color localizables.

CSS de categorías

Si deseas una personalización más potente, Blockly también te permite especificar clases de CSS para diferentes elementos de la IU predeterminada. Luego, puedes usar CSS para aplicarles diseño.

Se pueden aplicar clases de CSS a los siguientes tipos de elementos:

• container: Es la clase del div superior de la categoría. blocklyToolboxCategory predeterminado.
• fila: Es la clase del div que contiene la etiqueta y el ícono de la categoría. blocklyTreeRow predeterminado.
• icon: Es la clase del ícono de categoría. blocklyTreeIcon predeterminado.
• label: Es la clase de la etiqueta de categoría. blocklyTreeLabel predeterminado.
• selected: Es la clase que se agrega a la categoría cuando se selecciona. blocklyTreeSelected predeterminado.
• openicon: Es la clase que se agrega a un ícono cuando la categoría tiene categorías anidadas y está abierta. blocklyTreeIconOpen predeterminado.
• closedicon: Es la clase que se agrega a un ícono cuando la categoría tiene categorías anidadas y está cerrada. blocklyTreeIconClosed predeterminado.

A continuación, se muestra cómo especificar las clases con cualquiera de los formatos:

JSONXML

Establece la clase CSS de un tipo de elemento en particular con la propiedad cssConfig.

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

Para establecer la clase CSS de un tipo de elemento en particular, anteplágale "css-".

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