Aspetto della categoria

Blockly fornisce un'interfaccia utente delle categorie predefinita e alcune opzioni di base per il loro stile. Per informazioni su come applicare stili/configurazioni più avanzati all'interfaccia utente, consulta il codelab Personalizzazione di una cassetta degli attrezzi di Blockly e la presentazione Toolbox APIs 2021.

Temi

I temi ti consentono di specificare contemporaneamente tutti i colori della tua area di lavoro, inclusi i colori delle categorie.

Per utilizzarle, devi associare la tua categoria a uno stile di categoria specifico:

JSONXML

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

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

Colori

Puoi anche specificare il colore direttamente, ma questa operazione non è consigliata. Il colore è un numero in formato stringa (0-360) che specifica la tonalità. Tieni presente che si tratta della ortografia britannica.

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>

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

CSS della categoria

Se vuoi una personalizzazione più efficace, Blockly ti consente anche di specificare classi CSS per diversi elementi dell'interfaccia utente predefinita. Puoi quindi utilizzare il CSS per impostarne lo stile.

Ai seguenti tipi di elementi è possibile applicare classi CSS:

• container: il nome della classe del div principale per la categoria. Predefinito: blocklyToolboxCategory.
• riga: la classe per il div contenente l'icona e l'etichetta della categoria. Predefinito: blocklyTreeRow.
• icon: la classe dell'icona della categoria. Predefinito: blocklyTreeIcon.
• label: la classe per l'etichetta della categoria. Predefinito: blocklyTreeLabel.
• selected: la classe aggiunta alla categoria quando è selezionata. Predefinito: blocklyTreeSelected.
• openicon: la classe aggiunta a un'icona quando la categoria ha categorie nidificate ed è aperta. Predefinito: blocklyTreeIconOpen.
• closedicon: il CSS aggiunto a un'icona quando la categoria contiene categorie nidificate ed è chiusa. Predefinito: blocklyTreeIconClosed.

Ecco come specificare le classi utilizzando uno dei due formati:

JSONXML

Imposta la classe CSS di un determinato tipo di elemento utilizzando la proprietà cssConfig.

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

Imposta la classe CSS di un determinato tipo di elemento anteponendo "css-".

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