Temi

I temi consentono di personalizzare l'aspetto di Blockly. Puoi personalizzare i colori dei blocchi, i colori delle categorie e alcuni componenti tramite la classe Themes. Se vuoi personalizzare componenti aggiuntivi, forniamo il nome del tema come classe nel div di inserimento. Ciò consente agli utenti di modificare l'aspetto di eventuali componenti non supportati tramite CSS. Il nostro obiettivo principale nella creazione di temi è consentire agli sviluppatori di creare esperienze Blockly più accessibili.

Proprietà tema

Un tema è un oggetto con diverse proprietà: il tema di base da cui estendere l'estensione, un oggetto stile per blocchi, categorie, componenti e caratteri e l'eventuale utilizzo di cappelli per i blocchi iniziali.

Stile blocco

Uno stile di blocco è composto da quattro campi:

  • colourPrimary (obbligatorio): il colore di sfondo del blocco.
  • colourSecondary (facoltativo): il colore di sfondo se il blocco è un blocco di ombra.
  • (Facoltativo) colourTertiary: il colore del bordo o di evidenziazione del blocco.
  • (Facoltativo) hat: aggiunge un cappello a un blocco, se il valore è impostato su cap. Scopri di più sui cappelli.

Blocco con frecce che puntano al colore principale, secondario e terziario

const listBlocks = {
   'colourPrimary': '#4a148c',
   'colourSecondary':'#AD7BE9',
   'colourTertiary':'#CDB6E9',
   'hat': 'cap'
}

Un tema include una mappatura del nome dello stile blocco per bloccare l'oggetto stile:

const blockStyles = {
   'list_blocks': {
      'colourPrimary': '#4a148c',
      'colourSecondary':'#AD7BE9',
      'colourTertiary':'#CDB6E9'
   },
   'logic_blocks': {
      'colourPrimary': '#01579b',
      'colourSecondary':'#64C7FF',
      'colourTertiary':'#C5EAFF'
   }
}

Stile categoria

Uno stile di categoria contiene solo una proprietà colore.

  • Colore (obbligatorio): il colore della categoria nella casella degli strumenti. In genere, questi colori dovrebbero corrispondere a quelli di colourPrimary sulla maggior parte dei blocchi della categoria. In questo modo gli utenti possono capire facilmente quali blocchi appartengono a una determinata categoria.

Screenshot di toolbox con diversi colori di categoria

const mathCategory = {
   'colour':'290'
}

Un tema includerà una mappatura del nome della categoria all'oggetto dello stile della categoria:

const categoryStyles = {
   'list_category': {
      'colour': '#4a148c'
   },
   'logic_category': {
      'colour': '#01579b',
   }
}

Stili dei componenti

Un tema può impostare il colore o il valore dei seguenti componenti:

  • workspaceBackgroundColour: il colore dello sfondo dell'area di lavoro
  • toolboxBackgroundColour: colore di sfondo degli strumenti
  • toolboxForegroundColour: colore testo categoria strumenti
  • flyoutBackgroundColour: colore di sfondo a comparsa
  • flyoutForegroundColour: colore testo etichetta riquadro a scomparsa
  • flyoutOpacity: opacità flyout
  • scrollbarColour: colore barra di scorrimento
  • scrollbarOpacity: opacità barra di scorrimento
  • insertionMarkerColour: il colore dell'indicatore di inserimento (non accetta nomi di colori)
  • insertionMarkerOpacity: opacità dell'indicatore di inserimento
  • markerColour: il colore dell'indicatore visualizzato nella modalità di navigazione da tastiera
  • cursorColour: il colore del cursore visualizzato nella modalità di navigazione da tastiera

La maggior parte degli altri componenti può essere modificata utilizzando il nome del tema nel CSS. Tuttavia, se vuoi modificare un componente che non fa già parte dell'elenco e non può essere modificato utilizzando CSS, segnala un problema con maggiori informazioni.

const componentStyle = {
   'workspaceBackgroundColour': '#1e1e1e',
   'toolboxBackgroundColour': '#333'
}

Stili dei caratteri

Uno stile di carattere è un oggetto che contiene la famiglia, lo spessore e le dimensioni di un carattere.

const fontStyle = {
   'family': 'Georgia, serif',
   'weight': 'bold',
   'size': 12
}

Inizia attività - Cappelli

Se imposti startHats: true direttamente in un oggetto tema, verrà aggiunto un cappello a tutti i blocchi senza connessioni precedenti o di output. Se vuoi un maggiore controllo sui blocchi esatti a cui assegnare un cappello, puoi utilizzare la proprietà block style.

Temi personalizzati

Per aggiungere un tema alla tua applicazione Blockly, devi fare quanto segue:

  1. Crea un tema
  2. Aggiungi nomi di stili
  3. Impostare il tema in un'area di lavoro

Crea un tema

È possibile creare un tema utilizzando il costruttore o defineTheme. L'utilizzo di defineTheme semplifica l'estensione di un tema preesistente e l'impostazione di tutti i valori con un singolo oggetto. Un tema ha un nome ed è un oggetto con gli stili di blocco, gli stili delle categorie e altre proprietà come illustrato sopra.

Un tema può anche avere un tema di base, che fornirà valori predefiniti per eventuali valori non specificati nel tema personalizzato.

const theme = Blockly.Theme.defineTheme('themeName', {
   'base': Blockly.Themes.Classic,
   'blockStyles': {
      'logic_blocks': {
         'colourPrimary': '#4a148c'
      },
      'math_blocks': {...}
   },
   'categoryStyles': {...},
   'componentStyles': {...},
   'fontStyle': {...},
   'startHats': true
});

Ecco un esempio di utilizzo di defineTheme.

Aggiungi nomi di stili

Ora che abbiamo creato un tema, dobbiamo aggiungere il nome degli stili alle definizioni dei blocchi e delle categorie.

Categorie

La modalità di definizione degli strumenti determina la modalità di aggiunta del nome dello stile. Consulta la pagina degli strumenti per ulteriori informazioni.

Stoppate

La modalità di definizione del blocco determina la modalità di aggiunta del nome dello stile. Puoi trovare ulteriori informazioni sulle definizioni dei blocchi nella nostra pagina relativa ai blocchi personalizzati. Assegnerai al blocco uno degli stili di blocco che hai definito nella proprietà blockStyles del tema.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

Imposta il tema

Devi anche indicare a Blockly quale tema utilizzare. Definendo diversi temi che utilizzano lo stesso stile di blocco e nomi di categorie, puoi consentire all'utente di scegliere il tema più adatto alle sue esigenze e modificarlo in modo dinamico senza dover modificare le definizioni dei blocchi.

Tema iniziale

Il modo migliore per impostare un tema iniziale è includere options.theme nella chiamata di inserimento. Puoi fornire il tema in formato JSON o JavaScript.

JSON

{
   theme: {
      "blockStyles" : {
         "list_blocks": {
            "colourPrimary": "#4a148c",
            "colourSecondary":"#AD7BE9",
            "colourTertiary":"#CDB6E9"
         }
      },
      "categoryStyles" : {
         "list_category": {
            "colour": "#4a148c"
         }
      },
      "componentStyles" : {
         "workspaceBackgroundColour": "#1e1e1e"
      }
   }
}

JavaScript

{
   theme: Blockly.Theme.defineTheme('themeName', {
      'blockStyles': blockStyles,
      'categoryStyles': categoryStyles,
      'componentStyles': componentStyles
   })
}

Ulteriori informazioni sulle opzioni sono disponibili nella nostra pagina di configurazione. Se non viene fornito alcun tema, per impostazione predefinita verrà utilizzato il tema classico.

Temi dinamici

Se vuoi modificare il tema in modo dinamico (ad esempio se consenti agli utenti di scegliere un tema da un menu a discesa), puoi chiamare yourWorkspace.setTheme(theme).

Crea script per gli stili di blocco

Blockly fornisce uno script che prende in considerazione una mappa di tonalità o valori esadecimali e calcola i rispettivi colori secondari e terziari. Lo script è disponibile nella cartella script/temi.

Temi integrati

Blockly offre una serie di temi per l'accessibilità, in particolare alcuni tipi di deficit della visione dei colori:

Abbiamo anche: