Up to date

This page is up to date for Godot 4.2. If you still find outdated information, please open an issue.

Theme type variations

Lors de la conception d'une interface utilisateur, il peut arriver qu'un nœud Control doive avoir un aspect différent de celui qui est normalement défini par un Theme. Chaque nœud de contrôle possède des substitutions de propriétés de thème, qui vous permettent de redéfinir le style de chaque élément individuel de l'interface utilisateur.

../../_images/themecheck.png

Cette approche devient rapidement difficile à gérer, si vous devez partager le même look personnalisé entre plusieurs contrôles. Imaginez que vous utilisiez des variantes grises, bleues et rouges de Button dans l'ensemble de votre projet. Le paramétrer chaque fois que vous ajoutez un nouvel élément bouton à votre interface est une tâche fastidieuse.

Pour aider à l'organisation et pour mieux utiliser la puissance des thèmes, vous pouvez utiliser des variations de type de thème. Celles-ci fonctionnent comme les types de thèmes normaux, mais au lieu d'être autosuffisantes et autonomes, elles étendent un type de base.

En suivant l'exemple précédent, votre thème peut avoir des styles, des couleurs et des polices définis pour le type Button, personnalisant l'apparence de chaque élément de bouton dans votre interface utilisateur. Pour avoir un bouton gris, rouge ou bleu, vous devez créer un nouveau type, par exemple GrayButton, et le marquer comme une variation du type de base Button.

Les variations de type peuvent remplacer certains aspects du type de base, mais en conserver d'autres. Elles peuvent également définir des propriétés que le style de base n'a pas définies. Par exemple, votre GrayButton peut remplacer le style normal de la base Button et ajouter font_color que Button n'a jamais défini. Le contrôle utilisera une combinaison des deux types en donnant la priorité à la variation du type.

Note

La manière dont les contrôles résolvent les éléments de thème qu'ils utilisent à partir de chaque type et de chaque thème est mieux décrite dans la section Personnaliser un projet de l'article "Introduction à l'habillage des interfaces graphiques".

Creating a type variation

Pour créer une variation de type, ouvrez l'éditeur de thème, puis cliquez sur l'icône plus à côté du menu déroulant Type sur le côté droit de l'éditeur. Saisissez le nom que vous souhaitez donner à la variation de type de votre thème dans la zone de texte, puis cliquez sur Ajouter un type.

Sous la liste déroulante Type se trouvent les onglets de propriétés. Passez à l'onglet comportant l'icône d'une clé et d'un tournevis.

../../_images/base_type.png

Cliquez sur l'icône plus à côté du champ Type de base. Vous pouvez y sélectionner le type de base, qui est généralement le nom d'une classe de nœud de contrôle (par exemple, "Bouton", "Étiquette", etc.). Les variantes de type peuvent également enchaîner et étendre d'autres variantes de type. Cela fonctionne de la même manière que les nœuds de contrôle héritent du style de leur classe de base. Par exemple, "CheckButton" hérite des styles de "Button" parce que les types de nœuds correspondants s'étendent mutuellement.

Après avoir sélectionné le type de base, vous devriez maintenant être en mesure de voir ses propriétés sur les autres onglets de l'éditeur de thème. Vous pouvez les modifier comme d'habitude.

Using a type variation

Maintenant qu'une variation de type a été créée, vous pouvez l'appliquer à vos nœuds. Dans le dock de l'inspecteur, sous la propriété Theme d'un nœud de contrôle, vous pouvez trouver la propriété Theme Type Variation. Elle est vide par défaut, ce qui signifie que seul le type de base a un effet sur ce nœud.

You can either select a type variation from a dropdown list, or input its name manually. Variations appear on the list only if the type variation belongs to the project-wide theme, which you can configure in the project settings. For any other case you have to input the name of the variation manually. Click on the pencil icon to the right. Then type in the name of the type variation and click the check mark icon or press enter. If a type variation with that name exists it will now be used by the node.