Mit Designs kannst du das Erscheinungsbild von Blockly anpassen. Über die Klasse Themes
können Sie Blockfarben, Kategoriefarben und bestimmte Komponenten anpassen. Wenn Sie zusätzliche Komponenten anpassen möchten, stellen wir den Designnamen als Klasse im Injection-Div bereit. So können Nutzer das Aussehen nicht unterstützter Komponenten über CSS ändern. Unser Hauptziel bei der Erstellung von Themes ist es, Entwickler in die Lage zu versetzen, barrierefreie Blockly-Erlebnisse zu erstellen.
Designeigenschaften
Ein Design ist ein Objekt mit mehreren Eigenschaften: das zu erweiternde Basisthema, ein Stilobjekt für Blöcke, Kategorien, Komponenten und Schriftarten sowie die Angabe, ob Hüte für Startblöcke verwendet werden sollen.
Blockstil
Ein Blockstil besteht aus vier Feldern:
colourPrimary
(erforderlich): die Hintergrundfarbe des Blocks.colourSecondary
(optional): Die Hintergrundfarbe, wenn der Block ein Schattenblock ist.colourTertiary
(optional): Die Rahmen- oder Hervorhebungsfarbe des Blocks.hat
(optional): Wenn der Wert aufcap
gesetzt ist, wird dem Block ein Hut hinzugefügt. Weitere Informationen zu Hüten
const listBlocks = {
'colourPrimary': '#4a148c',
'colourSecondary':'#AD7BE9',
'colourTertiary':'#CDB6E9',
'hat': 'cap'
}
Ein Design enthält eine Zuordnung des Blockstilnamens zum Blockstilobjekt:
const blockStyles = {
'list_blocks': {
'colourPrimary': '#4a148c',
'colourSecondary':'#AD7BE9',
'colourTertiary':'#CDB6E9'
},
'logic_blocks': {
'colourPrimary': '#01579b',
'colourSecondary':'#64C7FF',
'colourTertiary':'#C5EAFF'
}
}
Stil der Kategorie
Ein Kategoriestil umfasst nur eine Farbeigenschaft.
- Farbe (erforderlich): Die Farbe der Kategorie in der Toolbox. In der Regel sollten diese Farben mit den Farben für
colourPrimary
in den meisten Blöcken der Kategorie übereinstimmen. So können Nutzer leicht erkennen, welche Blöcke zu einer bestimmten Kategorie gehören.
const mathCategory = {
'colour':'290'
}
Ein Design enthält eine Zuordnung des Kategorienamens zum Kategoriestilobjekt:
const categoryStyles = {
'list_category': {
'colour': '#4a148c'
},
'logic_category': {
'colour': '#01579b',
}
}
Komponentenstile
Ein Design kann die Farbe oder den Wert der folgenden Komponenten festlegen:
workspaceBackgroundColour
: Hintergrundfarbe des ArbeitsbereichstoolboxBackgroundColour
: Toolbox-HintergrundfarbetoolboxForegroundColour
: Textfarbe der Toolbox-KategorieflyoutBackgroundColour
: Flyout-HintergrundfarbeflyoutForegroundColour
: Farbe des Flyout-LabelsflyoutOpacity
: Flyout-DeckkraftscrollbarColour
: Farbe der BildlaufleistescrollbarOpacity
: Deckkraft der BildlaufleisteinsertionMarkerColour
: die Farbe der Einfügungsmarkierung. Farbnamen sind nicht zulässig.insertionMarkerOpacity
: die Deckkraft der EinfügungsmarkierungmarkerColour
: Die Farbe der Markierung, die im Tastaturnavigationsmodus angezeigt wirdcursorColour
: Die Farbe des Cursors, der im Tastaturnavigationsmodus angezeigt wird
Die meisten anderen Komponenten können über den Designnamen im CSS-Code geändert werden. Wenn Sie jedoch eine Komponente ändern möchten, die noch nicht in dieser Liste enthalten ist und nicht mit CSS geändert werden kann, reichen Sie bitte ein Problem mit weiteren Informationen ein.
const componentStyle = {
'workspaceBackgroundColour': '#1e1e1e',
'toolboxBackgroundColour': '#333'
}
Schriftstile
Ein Schriftstil ist ein Objekt, das die Familie, die Stärke und die Größe einer Schriftart enthält.
const fontStyle = {
'family': 'Georgia, serif',
'weight': 'bold',
'size': 12
}
Hüte starten
Wenn Sie startHats: true
direkt in einem Designobjekt festlegen, wird allen Blöcken ohne vorherige oder Ausgabeverbindungen ein Hut hinzugefügt. Wenn Sie genauer steuern möchten, welche Blöcke einen Hut erhalten, können Sie stattdessen die Eigenschaft block style verwenden.
Benutzerdefinierte Designs
So fügen Sie Ihrer Blockly-Anwendung ein Design hinzu:
- Design erstellen
- Stilnamen hinzufügen
- Design für einen Arbeitsbereich festlegen
Design erstellen
Ein Design kann mit dem Konstruktor oder mithilfe von defineTheme
erstellt werden. Mit defineTheme
können Sie ganz einfach ein vorhandenes Design erweitern und alle Werte mit einem einzigen Objekt festlegen. Ein Design hat einen Namen und ist ein Objekt mit Blockstile, Kategoriestile und anderen Eigenschaften, wie oben beschrieben.
Ein Design kann auch ein Basisdesign haben, das Standardwerte für alle Werte bereitstellt, die nicht im benutzerdefinierten Design angegeben sind.
const theme = Blockly.Theme.defineTheme('themeName', {
'base': Blockly.Themes.Classic,
'blockStyles': {
'logic_blocks': {
'colourPrimary': '#4a148c'
},
'math_blocks': {...}
},
'categoryStyles': {...},
'componentStyles': {...},
'fontStyle': {...},
'startHats': true
});
Hier ist ein Beispiel für die Verwendung von defineTheme
.
Stilnamen hinzufügen
Nachdem Sie nun ein Design erstellt haben, müssen Sie den Namen der Stile zu den Block- und Kategoriedefinitionen hinzufügen.
Kategorien
Wie Sie den Stilnamen hinzufügen, hängt von der Definition Ihrer Toolbox ab. Weitere Informationen finden Sie auf der Toolbox-Seite.
Blocks
Durch die Definition des Blocks wird festgelegt, wie der Stilname hinzugefügt wird. Weitere Informationen zu Blockdefinitionen finden Sie auf der Seite Benutzerdefinierte Blockierungen. Sie weisen Ihrem Block einen der Blockstile zu, die Sie in der Eigenschaft blockStyles
des Designs definiert haben.
JSON
"style":"logic_blocks"
JavaScript
this.setStyle('logic_blocks');
Design festlegen
Außerdem müssen Sie Blockly mitteilen, welches Design verwendet werden soll. Wenn Sie mehrere Themen mit demselben Blockstil und denselben Kategorienamen definieren, kann der Nutzer das Design auswählen, das für ihn am besten geeignet ist, und es dynamisch ändern, ohne die Blockdefinitionen selbst ändern zu müssen.
Ursprüngliches Design
Die beste Methode zum Festlegen eines Anfangsdesigns besteht darin, options.theme
in Ihren Injection-Aufruf aufzunehmen. Sie können das Design im JSON- oder JavaScript-Format zur Verfügung stellen.
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
})
}
Weitere Informationen zu den Optionen finden Sie auf unserer Konfigurationsseite. Wenn kein Design angegeben ist, wird standardmäßig das Klassische Design verwendet.
Dynamische Designs
Wenn Sie das Design dynamisch ändern möchten, z. B. wenn Nutzern die Möglichkeit gegeben wird, ein Design aus einem Drop-down-Menü auszuwählen, können Sie yourWorkspace.setTheme(theme)
aufrufen.
Script für Blockstile erstellen
Blockly stellt ein Skript zur Verfügung, das eine Zuordnung von Farb- oder Hexadezimalwerten annimmt und die Sekundär- und Tertiärfarben für sie berechnet. Das Skript befindet sich im Ordner scripts/themes.
Integrierte Designs
Blockly bietet eine Reihe von Themen für die Barrierefreiheit, insbesondere bestimmte Arten von Farbblindheit:
Außerdem gibt es:
- Klassisches Design
- Modern
- Dunkler Modus