Aspetto della categoria

Blockly fornisce un'interfaccia utente predefinita per le categorie e alcune opzioni di base per lo stile. Se vuoi informazioni su come eseguire uno stile/una configurazione più avanzati della UI, consulta il codelab Personalizzazione di una toolbox Blockly e il talk sulle API Toolbox 2021.

Una casella degli strumenti delle categorie con sei categorie. La categoria Variabili è aperta e contiene blocchi getter e setter di variabili. Il colore dei blocchi corrisponde al colore della barra verticale a sinistra del nome della categoria Variabili.

CSS per categoria

Puoi utilizzare CSS per applicare uno stile alle caselle degli strumenti delle categorie. La voce per ogni categoria è divisa in più parti, ad esempio l'icona, l'etichetta e la riga contenente l'icona e l'etichetta. Puoi applicare uno stile a ogni parte singolarmente.

Per impostazione predefinita, a tutte le parti dello stesso tipo (ad es. tutte le etichette) viene assegnata la stessa classe CSS. Utilizza questa classe se vuoi applicare lo stesso stile a tutte le parti dello stesso tipo. Ad esempio, vuoi che tutte le etichette abbiano lo stesso colore.

Puoi anche assegnare a ogni parte individuale la propria classe CSS. Utilizza questo metodo se vuoi applicare stili diversi alle singole parti. Ad esempio, vuoi che ogni etichetta abbia il proprio colore.

La tabella seguente elenca i tipi, le descrizioni e le classi CSS predefinite di ogni parte di una casella degli strumenti delle categorie. Se hai difficoltà a visualizzare questo elemento, apri gli strumenti per sviluppatori nel browser ed esamina la casella degli strumenti.

Tipo di ricambio Descrizione Classe CSS predefinita
contenuti Il div che contiene tutte le categorie. blocklyToolboxCategoryGroup
container Il div che contiene una singola categoria e le relative sottocategorie. blocklyToolboxCategoryContainer
riga Il div che contiene la categoria. blocklyToolboxCategory
rowcontentcontainer Il div che contiene l'etichetta e l'icona. blocklyTreeRowContentContainer
icona Il span che contiene l'icona. blocklyToolboxCategoryIcon
etichetta Il span che contiene l'etichetta. blocklyToolboxCategoryLabel
selezionato Aggiunta alla "riga" div quando viene selezionata la categoria. blocklyToolboxSelected
openicon Aggiunta all'icona span quando una categoria con sottocategorie è aperta. blocklyToolboxCategoryIconOpen
closedicon Aggiunta all'icona span quando una categoria con sottocategorie viene chiusa. blocklyToolboxCategoryIconClosed

Ad esempio, supponiamo che tu voglia che tutte le etichette siano bianche, ma che la riga di ogni categoria abbia un proprio colore di sfondo. A questo scopo, devi utilizzare classi CSS personalizzate per ogni riga. Puoi utilizzare la classe predefinita per le etichette.

Una cassetta degli attrezzi con due categorie. Le etichette delle categorie sono entrambe bianche, ma i colori di sfondo sono diversi.

Innanzitutto, assegna classi CSS personalizzate nel file JSON o XML che definisce le categorie:

JSON

Imposta classi CSS personalizzate utilizzando la proprietà 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

Imposta classi CSS personalizzate utilizzando un attributo il cui nome è il tipo di parte con css- anteposto.

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

Nel file CSS, utilizza le classi personalizzate per assegnare i colori delle righe e la classe predefinita per assegnare il colore dell'etichetta:

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

Temi

I temi ti consentono di specificare tutti i colori del tuo spazio di lavoro contemporaneamente, inclusi i colori delle categorie.

Per utilizzarli, devi associare la categoria a uno stile specifico:

JSON

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

XML

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

Colori

Puoi anche specificare direttamente il colore, ma questa operazione non è consigliata. Il colore è un numero convertito in stringa (0-360) che specifica la tonalità. Prendi nota dell'ortografia britannica.

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>

Tieni presente che supportiamo anche l'utilizzo di riferimenti ai colori localizzabili.