Blockly fournit une UI de catégories par défaut, ainsi que des 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.
CSS de catégorie
Vous pouvez utiliser le CSS pour styliser les boîtes à outils de catégorie.
Une boîte à outils de catégorie est composée de plusieurs éléments HTML, chacun modélisant une partie différente de la boîte à outils. Par exemple, chaque catégorie possède son propre div et des span distincts pour son icône et son libellé. (Pour obtenir la liste complète, consultez le tableau ci-dessous.)
Blockly attribue une classe CSS par défaut à toutes les parties du même type. Par exemple, il attribue blocklyToolboxCategoryLabel à toutes les étiquettes span. Utilisez ces classes pour styliser toutes les parties du même type de la même manière, par exemple pour attribuer la même couleur à tous les libellés. Blockly utilise ces classes dans son CSS par défaut pour les boîtes à outils de catégorie.
Vous pouvez éventuellement attribuer des classes CSS personnalisées à des parties individuelles. Par exemple, vous pouvez attribuer différentes classes CSS à chaque libellé span. Utilisez ces classes pour styliser différentes parties du même type de différentes manières, par exemple pour attribuer une couleur différente à chaque libellé.
Classes CSS par défaut
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 |
Le CSS est également utilisé pour indiquer l'état de certaines parties de la boîte à outils.
| État | Description | Classe CSS par défaut |
|---|---|---|
| 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 |
Classes CSS personnalisées
Pour attribuer des classes CSS personnalisées, utilisez la propriété cssConfig dans les définitions de la boîte à outils JSON ou les attributs css- dans les définitions de la boîte à outils XML, et utilisez le type de partie pour identifier la partie à laquelle vous souhaitez attribuer des classes.
Par exemple, supposons que vous souhaitiez que tous les libellés soient blancs, mais que chaque catégorie ait sa propre couleur d'arrière-plan. Vous pouvez utiliser la classe par défaut pour les libellés, mais vous devez ajouter des classes personnalisées pour chaque ligne de catégorie.
Les définitions de catégorie suivantes attribuent des classes CSS personnalisées à la ligne de chaque catégorie. Notez que la classe par défaut pour les lignes (blocklyToolboxCategory) est incluse dans chaque définition. En effet, Blockly écrase l'attribut class de la ligne lors de l'attribution des classes. Si vous n'incluez pas la classe par défaut, vous n'obtiendrez pas le code CSS par défaut pour cette classe.
JSON
Définissez des classes CSS personnalisées à l'aide de la propriété 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
Définissez des classes CSS personnalisées à l'aide d'un attribut dont le nom est le type de partie avec le préfixe css-.
<category name="My category" css-row="blocklyToolboxCategory myRow">
...
</category>
<category name="Your category" css-row="blocklyToolboxCategory 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.