Style de l'interface utilisateur

*Ce contenu est traduit en utilisant l'IA (Beta) et peut contenir des erreurs. Pour consulter cette page en anglais, clique ici.

Le style de l'interface utilisateur est une solution Roblox pour les feuilles de style, similaire à CSS , qui vous permet de déclarer et d'appliquer globalement des annulations aux propriétés de l'instance d'interface utilisateur.Ce soutien au niveau du moteur est la base du éditeur de style et du pipeline de jetons bout à bout.

concepts

Les règles de style (partie d'une règle ) s'appliquent à chaque instance qui correspond à la définition de la règle pour correspondre à des caractéristiques telles que le nom de classe, le nom d'instance et les relations hiérarchiques.Voir la documentation Selector pour les détails.

Le style jetons , défini via attributs d'un jeton , représente les variables de propriété de l'interface utilisateur qui peuvent être utilisées dans différents styles et composants, par exemple une couleur commune pour un , et .Les jetons sont comparables aux variables CSS ..

Les thèmes style sont configurés via les attributs d'un thème , consistant en des ensembles de jetons spécifiques qui peuvent être échangés, par exemple des jetons de couleur qui définissent un thème "lumière" et "obscurité".Les thèmes liés doivent avoir le même ensemble de jetons pour fonctionner correctement.

Propagation des règles

Une instance StyleLink lie un StyleSheet et ses règles associées à un parent ScreenGui et tout le GuiObjects à l'intérieur à un parent.Seule une StyleSheet peut s'appliquer à un arbre donné.

Définitions de sélectionneur

À un niveau élevé, le correspondage et la modification d'instance via la définition d'une règle Selector fonctionnent par le biais de :

  • Sélecteurs de classe Roblox qui ciblent toutes les instances d'une classe donnée, par exemple , , , , etc.
  • Les balises d'instance appliquées à des objets d'interface spécifiques via .
  • Sélection de l'instance nom selon la valeur de l'objet d'interface utilisateur Instance.Name.
  • Instance modifieurs , similaire à pseudo-éléments CSS , appliqués via phantom UIComponents tels que UICorner ou UIStroke .
  • GuiObject état sélecteurs, similaires aux sélecteurs de pseudo-classe CSS, qui correspondent à l'un des quatre valeurs d'enumération GuiState tels que Hover .

La configuration suivante montre comment les jetons de taille et de couleur, un thème et un sélecteur de classe de "Frame" produisent un magenta Frame de taille 200×200 pixels.

Sélecteur de classe d'interface utilisateur
local CollectionService = game:GetService("CollectionService")

local ReplicatedStorage = game:GetService("ReplicatedStorage")



local screenGui = script.Parent



-- Tokens

local tokens = Instance.new("StyleSheet")

tokens.Name = "Tokens"

tokens.Parent = ReplicatedStorage

tokens:SetAttribute("SquareS", UDim2.fromOffset(50, 50))

tokens:SetAttribute("SquareM", UDim2.fromOffset(100, 100))

tokens:SetAttribute("SquareL", UDim2.fromOffset(200, 200))

tokens:SetAttribute("Fit", UDim2.fromScale(1, 1))

tokens:SetAttribute("Magenta", Color3.fromHex("FF0099"))

tokens:SetAttribute("Gold", Color3.fromHex("FFCC00"))

tokens:SetAttribute("Aqua", Color3.fromHex("0093F0"))



-- ThèmeA

local themeA = Instance.new("StyleSheet")

themeA.Name = "ThemeA"

themeA.Parent = ReplicatedStorage

local tokensDerive = Instance.new("StyleDerive")

tokensDerive.StyleSheet = tokens  -- Dériver des jetons globaux

tokensDerive.Parent = themeA

themeA:SetAttribute("FrameSize", "$SquareM")

themeA:SetAttribute("FrameColor", "$Aqua")



-- ThèmeB

local themeB = Instance.new("StyleSheet")

themeB.Name = "ThemeB"

themeB.Parent = ReplicatedStorage

local tokensDerive = Instance.new("StyleDerive")

tokensDerive.StyleSheet = tokens  -- Dériver des jetons globaux

tokensDerive.Parent = themeB

themeB:SetAttribute("FrameSize", "$SquareL")

themeB:SetAttribute("FrameColor", "$Magenta")



-- Feuille de conception

local designSheet = Instance.new("StyleSheet")

designSheet.Name = "DesignSheet"

designSheet.Parent = ReplicatedStorage

local themeDerive = Instance.new("StyleDerive")

themeDerive.StyleSheet = themeB  -- Dérivé de ThemeB

themeDerive.Parent = designSheet



-- Lier la feuille de liens à ScreenGui

local styleLink = Instance.new("StyleLink")

styleLink.StyleSheet = designSheet

styleLink.Parent = screenGui



-- Configurer la règle

local rule = Instance.new("StyleRule")

rule.Selector = "Frame"  -- Sélecteur de classe

rule.Parent = designSheet



-- Définir les propriétés de règles

rule:SetProperties({

	["BackgroundColor3"] = "$FrameColor",

	["Size"] = "$FrameSize",

	["BorderSizePixel"] = 0

})



local frame = Instance.new("Frame")

frame.Parent = screenGui

propriétés modifiées

Les propriétés d'instance affectées par le style sont marquées d'un ⚠ dans la fenêtre Propriétés , et passer la souris sur une propriété affectée montre le style qui l'influence.Par exemple, si une règle de style dit à un élément balisé d'utiliser un de , la propriété de cet objet montrera la valeur par défaut de de mais son actualité réelle utilisera la valeur style de la règle.

Lorsqu'une valeur de propriété par défaut ou stylée est modifiée plus tard pour un objet d'interface utilisateur spécifique, elle devient audacieuse pour indiquer une valeur remplacée.Par exemple — en supposant une valeur par défaut AnchorPoint de 0, 0  — définir cette propriété à 1, 1 pour une instance spécifique révèle une annulation en caractères gras :

Pour toute valeur de propriété remplacée, vous pouvez la faire un clic droit dans la fenêtre propriétés et sélectionner réinitialiser à la valeur par défaut pour la restaurer à la valeur stylée ou à la valeur par défaut de la propriété si elle n'a pas été stylée.