Apparence des catégories

Blockly fournit une UI de catégories par défaut, ainsi que quelques options de style de base. Si vous souhaitez en savoir plus sur la personnalisation/configuration avancée de l'UI, consultez l'atelier de programmation Personnaliser une boîte à outils Blockly et la présentation sur les API de la boîte à outils 2021.

Boîte à outils de catégories avec six catégories. La catégorie "Variables" est ouverte et contient des blocs getter et setter de variables. La couleur des blocs correspond à celle de la barre verticale à gauche du nom de la catégorie "Variables".

CSS de catégorie

Vous pouvez utiliser le CSS pour styliser les boîtes à outils de catégorie. L'entrée de chaque catégorie est divisée en plusieurs parties, comme son icône, son libellé et la ligne contenant l'icône et le libellé. Vous pouvez appliquer un style à chaque partie individuellement.

Par défaut, toutes les parties du même type (par exemple, toutes les étiquettes) se voient attribuer la même classe CSS. Utilisez cette classe si vous souhaitez styliser toutes les parties du même type de la même manière. Par exemple, vous souhaitez que toutes les étiquettes aient la même couleur.

Vous pouvez également attribuer sa propre classe CSS à chaque partie. Utilisez cette méthode si vous souhaitez styliser différemment des parties individuelles. Par exemple, vous souhaitez que chaque libellé ait sa propre couleur.

Le tableau suivant liste les types, les descriptions et les classes CSS par défaut de chaque partie d'une boîte à outils de catégorie. Si vous avez du mal à visualiser cela, ouvrez les outils pour les développeurs dans votre navigateur et inspectez la boîte à outils.

Type de pièce Description Classe CSS par défaut
contenus div contenant toutes les catégories. blocklyToolboxCategoryGroup
conteneur div contenant une seule catégorie et ses sous-catégories. blocklyToolboxCategoryContainer
ligne div contenant la catégorie. blocklyToolboxCategory
rowcontentcontainer div contenant le libellé et l'icône. blocklyTreeRowContentContainer
icône span contenant l'icône. blocklyToolboxCategoryIcon
étiquette span contenant le libellé. blocklyToolboxCategoryLabel
sélectionné Ajouté à la div "ligne" lorsque la catégorie est sélectionnée. blocklyToolboxSelected
openicon Ajouté à l'icône span lorsqu'une catégorie avec des sous-catégories est ouverte. blocklyToolboxCategoryIconOpen
closedicon Ajouté à l'icône span lorsqu'une catégorie avec des sous-catégories est fermée. blocklyToolboxCategoryIconClosed

Par exemple, supposons que vous souhaitiez que tous vos libellés soient blancs, mais que la ligne de chaque catégorie ait sa propre couleur d'arrière-plan. Pour ce faire, vous avez besoin de classes CSS personnalisées pour chaque ligne. Vous pouvez utiliser la classe par défaut pour les libellés.

Boîte à outils avec deux catégories. Les libellés de catégorie sont tous deux blancs, mais leurs couleurs d'arrière-plan sont différentes.

Tout d'abord, attribuez des classes CSS personnalisées dans le fichier JSON ou XML qui définit vos catégories :

JSON

Définissez des classes CSS personnalisées à l'aide de la propriété 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

Définissez des classes CSS personnalisées à l'aide d'un attribut dont le nom correspond au type de partie avec le préfixe css-.

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

Dans votre fichier CSS, utilisez les classes personnalisées pour attribuer des couleurs aux lignes et la classe par défaut pour attribuer la couleur du libellé :

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

Thèmes

Les thèmes vous permettent de spécifier toutes les couleurs de votre espace de travail en même temps, y compris celles de vos catégories.

Pour les utiliser, vous devez associer votre catégorie à un style de catégorie spécifique :

JSON

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

XML

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

Coloris

Vous pouvez également spécifier directement la couleur, mais ce n'est pas recommandé. La couleur est un nombre sous forme de chaîne (0-360) spécifiant la teinte. Notez l'orthographe britannique.

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>

Notez que nous acceptons également l'utilisation de références de couleur localisables.