Aspecto de las categorías

Blockly proporciona una IU de categorías predeterminada y, con ella, algunas opciones básicas de diseño. Si quieres obtener información sobre cómo realizar una configuración o un diseño más avanzados de la IU, consulta el codelab de personalización de una caja de herramientas de Blockly y la charla sobre las APIs de la caja de herramientas de 2021.

Una caja de herramientas de categorías con seis categorías. La categoría Variables está abierta y contiene bloques de captadores y establecedores de variables. El color de los bloques coincide con el de la barra vertical a la izquierda del nombre de la categoría Variables.

CSS de categoría

Puedes usar CSS para diseñar las cajas de herramientas de categorías. La entrada de cada categoría se divide en varias partes, como su ícono, su etiqueta y la fila que contiene el ícono y la etiqueta. Puedes aplicar ajustes de diseño a cada parte de forma individual.

De forma predeterminada, a todas las partes del mismo tipo (p.ej., todas las etiquetas) se les asigna la misma clase CSS. Usa esta clase si deseas aplicar el mismo estilo a todas las partes del mismo tipo. Por ejemplo, deseas que todas las etiquetas tengan el mismo color.

También puedes asignar a cada parte individual su propia clase CSS. Usa este método si deseas aplicar un diseño diferente a cada parte. Por ejemplo, deseas que cada etiqueta tenga su propio color.

En la siguiente tabla, se enumeran los tipos, las descripciones y las clases CSS predeterminadas de cada parte de una caja de herramientas de categorías. Si tienes problemas para visualizar esto, abre las herramientas para desarrolladores en tu navegador y examina la caja de herramientas.

Tipo de repuesto Descripción Clase de CSS predeterminada
contenidos Es el div que contiene todas las categorías. blocklyToolboxCategoryGroup
contenedor Es el div que contiene una sola categoría y sus subcategorías. blocklyToolboxCategoryContainer
fila Es el div que contiene la categoría. blocklyToolboxCategory
rowcontentcontainer Es el div que contiene la etiqueta y el ícono. blocklyTreeRowContentContainer
ícono Es el span que contiene el ícono. blocklyToolboxCategoryIcon
etiqueta Es el span que contiene la etiqueta. blocklyToolboxCategoryLabel
seleccionado Se agrega a la "fila" div cuando se selecciona la categoría. blocklyToolboxSelected
openicon Se agrega al ícono "ícono" span cuando se abre una categoría con subcategorías. blocklyToolboxCategoryIconOpen
closedicon Se agrega al ícono span cuando se cierra una categoría con subcategorías. blocklyToolboxCategoryIconClosed

Por ejemplo, supongamos que deseas que todas tus etiquetas sean blancas, pero que cada fila de categoría tenga su propio color de fondo. Para ello, necesitas clases CSS personalizadas para cada fila. Puedes usar la clase predeterminada para las etiquetas.

Una caja de herramientas con dos categorías. Las etiquetas de categoría son blancas, pero sus colores de fondo son diferentes.

Primero, asigna clases CSS personalizadas en el código JSON o XML que define tus categorías:

JSON

Establece clases de CSS personalizadas con la propiedad 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

Establece clases de CSS personalizadas con un atributo cuyo nombre sea el tipo de parte con css- agregado al principio.

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

En tu archivo CSS, usa las clases personalizadas para asignar colores de fila y la clase predeterminada para asignar el color de la etiqueta:

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

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 usarlas, debes asociar tu categoría con un estilo de categoría en particular:

JSON

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

XML

<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 (0-360) que especifica el tono. Ten en cuenta la ortografía 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>

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