Die Benutzeroberflächengestaltung ist eine Roblox-Lösung für Stylesheets, ähnlich wie CSS, mit der du Änderungen an den Eigenschaften der UI-Instanz deklarieren und global anwenden kannst.Diese Engine-Level-Unterstützung ist die Grundlage für den Stil-Editor und die End-to-End-Token-Pipeline.
Konzepte
Style Regeln (Teil einer > ) gelten für jede Instanz, die die Definition der Regel > erfüllt, um Merkmale wie Klassenname, Instanzname und Hierarchiebeziehungen zu entsprechen.Siehe die Selector.
Style Token , definiert durch Attribute eines Tokens StyleSheet , repräsentieren UI-Eigenschaftsvariablen, die über Stile und Komponenten hinweg verwendet werden können, zum Beispiel eine gemeinsame Farbe für ein Frame.BackgroundColor3 , TextLabel.TextColor3 und UIStroke.Color .Token sind vergleichbar mit CSS-Variablen.
Style Themen , konfiguriert durch Attributen eines Themas StyleSheet , bestehen aus Sätzen spezifischer Token, die getauscht werden können, zum Beispiel Farb tokens, die ein "lichtes" und "dunkles" Thema definieren.Related Themen müssen dasselbe Set von Tokens haben, um richtig zu funktionieren.

Regelverbreitung
Eine Instanz verknüpft einen > und seine zugeordneten Regeln mit einem > Elternteil und allen > innerhalb von ihm.Nur eine StyleSheet kann sich auf einen bestimmten Baum beziehen.

Auswahldefinitionen
Auf einer hohen Ebene funktioniert das Übereinstimmen und Modifizieren von Instanzen durch eine Selector-Definition wie folgt:
- Roblox Klassen-Selektoren, die alle Instanzen einer bestimmten Klasse anvisieren, zum Beispiel >, >, >, etc.
- Instanz -Tags an spezifische UI-Objekte durch CollectionService.
- Instanz Name Auswahl entsprechend dem Wert des UI-Objekts Instance.Name.
- Instanz Modifizierer , ähnlich wie CSS-Pseudo-Elemente , die durch Phantom angewendet werden, wie z. B. oder .
- GuiObject Zustands- Auswahlern, ähnlich wie CSS-Pseudo-Klassen Auswahlern, die einer der vier GuiState Enum-Werte entsprechen, wie Hover .
Das folgende Setup zeigt, wie Größen- und Farb-Token, ein Thema und ein Klassenauswahl von "Frame" 200×200 Pixeln eine magenta Frame erzeugen.

UI-Klassenauswahl
local CollectionService = game:GetService("CollectionService")local ReplicatedStorage = game:GetService("ReplicatedStorage")local screenGui = script.Parent-- Zeichenlocal tokens = Instance.new("StyleSheet")tokens.Name = "Tokens"tokens.Parent = ReplicatedStoragetokens: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"))-- ThemAlocal themeA = Instance.new("StyleSheet")themeA.Name = "ThemeA"themeA.Parent = ReplicatedStoragelocal tokensDerive = Instance.new("StyleDerive")tokensDerive.StyleSheet = tokens -- Globale Token ableitentokensDerive.Parent = themeAthemeA:SetAttribute("FrameSize", "$SquareM")themeA:SetAttribute("FrameColor", "$Aqua")-- ThemaBlocal themeB = Instance.new("StyleSheet")themeB.Name = "ThemeB"themeB.Parent = ReplicatedStoragelocal tokensDerive = Instance.new("StyleDerive")tokensDerive.StyleSheet = tokens -- Globale Token ableitentokensDerive.Parent = themeBthemeB:SetAttribute("FrameSize", "$SquareL")themeB:SetAttribute("FrameColor", "$Magenta")-- Entwurfsheetlocal designSheet = Instance.new("StyleSheet")designSheet.Name = "DesignSheet"designSheet.Parent = ReplicatedStoragelocal themeDerive = Instance.new("StyleDerive")themeDerive.StyleSheet = themeB -- Ableiten von ThemeBthemeDerive.Parent = designSheet-- Verknüpfen von Designblatt mit ScreenGuilocal styleLink = Instance.new("StyleLink")styleLink.StyleSheet = designSheetstyleLink.Parent = screenGui-- Regel konfigurierenlocal rule = Instance.new("StyleRule")rule.Selector = "Frame" -- Klassenauswahlrule.Parent = designSheet-- Regel属性 setzenrule:SetProperties({["BackgroundColor3"] = "$FrameColor",["Size"] = "$FrameSize",["BorderSizePixel"] = 0})local frame = Instance.new("Frame")frame.Parent = screenGui
Modifizierte Eigenschaften
Instanz-Eigenschaften, die durch das Styling beeinträchtigt werden, werden mit einem ⚠ im Eigenschaften -Fenster markiert, und das Überfahren einer betroffenen Eigenschaft zeigt an, welcher Stil sie beeinflusst.Wenn zum Beispiel eine Stilregel einem mit gekennzeichneten einen von verwendet, zeigt die Objekt-Eigenschaft den Standardwert von aber ihr tatsächlicher Wert verwendet die Stilregel-Werte .

Wenn ein Standard- oder gestalteter Eigenschaftswert für ein bestimmtes UI-Objekt weiter modifiziert wird, wird er fett zu einem übergroßen Wert, um einen übergroßen Wert anzugeben.Zum Beispiel — unter der Annahme, dass ein Standard AnchorPoint von 0, 0 — diese Eigenschaft auf 1, 1 für eine bestimmte Instanz einstellt, offenbart eine Überschreibung in Fett:


Für jeden überschriebenen Eigenschaftswert kannst du mit der rechten Maustaste auf das Eigenschaften -Fenster klicken und Zurücksetzen auf Standard auswählen, um es auf den gestilten Wert oder auf den Standard-Eigenschaftswert zurückzusetzen, wenn er nicht gestylt wurde.