Stile dell'UI

Lo stile dell'interfaccia utente è una soluzione Roblox per gli stili, simile a CSS , che ti consente di dichiarare e applicare globalmente le sostituzioni alle proprietà dell'istanza dell'interfaccia utente.Questo supporto a livello del motore è la base per l'editor di stile e la pipeline di token end-to-end.

Concetti

Gli stili regole (parte di un StyleSheet ) si applicano a ogni istanza che corrisponde alla definizione della regola Selector per corrispondere a caratteristiche come il nome della classe, il nome dell'istanza e le relazioni gerarchiche.Vedi la documentazione Selector per i dettagli.

Stile token , definito attraverso attributi di un token StyleSheet , rappresenta le variabili proprietà dell'interfaccia utente che possono essere utilizzate attraverso gli stili e le componenti, ad esempio un colore comune per un Frame.BackgroundColor3 , TextLabel.TextColor3 e UIStroke.Color .I token sono paragonabili alle variabili CSS ..

Stile temi , configurati attraverso attributi di un tema StyleSheet , consistono in set di token specifici che possono essere scambiati, ad esempio token di colore che definiscono un tema "leggero" e "oscuro".I temi correlati devono avere lo stesso insieme di token per funzionare correttamente.

Propagazione delle regole

Un'istanza A StyleLink collega un StyleSheet e le sue regole associati a un genitore ScreenGui e tutto il GuiObjects all'interno di esso.Solo uno StyleSheet può essere applicato a un dato albero.

Definizioni selettore

A livello alto, la corrispondenza e la modifica dell'istanza attraverso la definizione di una regola Selector opera attraverso:

• Selettori di classe Roblox che mirano a tutte le istanze di una classe data, ad esempio , , , , ecc.
• Instance tag applicati a oggetti UI specifici attraverso CollectionService .
• Selezione del nome dell'istanza nome in base al valore dell'oggetto UI di Instance.Name.
• Instance modificatori , simili a pseudo-elementi CSS , applicati attraverso phantom UIComponents come UICorner o UIStroke .
• GuiObject stato selezionatori, simili ai pseudo-class CSS selezionatori, che corrispondono a uno dei quattro GuiState valori enum come Hover .

La seguente configurazione mostra come le dimensioni e i gettoni di colore, un tema e un selettore di classe di "Frame" producono un magenta Frame di dimensioni 200×200 pixel.

Selettore di classe UI
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"))

-- TemaA
local themeA = Instance.new("StyleSheet")
themeA.Name = "ThemeA"
themeA.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Deriva token globali
tokensDerive.Parent = themeA
themeA:SetAttribute("FrameSize", "$SquareM")
themeA:SetAttribute("FrameColor", "$Aqua")

-- ArgomentoB
local themeB = Instance.new("StyleSheet")
themeB.Name = "ThemeB"
themeB.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Deriva token globali
tokensDerive.Parent = themeB
themeB:SetAttribute("FrameSize", "$SquareL")
themeB:SetAttribute("FrameColor", "$Magenta")

-- Sheets di progettazione
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "DesignSheet"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB  -- Deriva da ThemeB
themeDerive.Parent = designSheet

-- Collega la DesignSheet a ScreenGui
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = designSheet
styleLink.Parent = screenGui

-- Configura la regola
local rule = Instance.new("StyleRule")
rule.Selector = "Frame"  -- Selettore di classe
rule.Parent = designSheet

-- Imposta le proprietà delle regole
rule:SetProperties({
	["BackgroundColor3"] = "$FrameColor",
	["Size"] = "$FrameSize",
	["BorderSizePixel"] = 0
})

local frame = Instance.new("Frame")
frame.Parent = screenGui

Proprietà modificate

Le proprietà dell'istanza interessate dallo stile sono contrassegnate con un ⚠ nella finestra Proprietà , e passare il mouse su una proprietà interessata mostra quale stile l'influenza.Ad esempio, se una regola di stile dice a un taggato di utilizzare un di , la proprietà dell'oggetto mostrerà il valore predefinito di ma il suo attuale utilizzerà il valore stilizzato della regola.

Quando un valore di proprietà predefinito o stilizzato viene ulteriormente modificato per un oggetto UI specifico, diventa grassetto per indicare un valore sostituito.Ad esempio — supponendo un valore predefinito di AnchorPoint di 0, 0  — impostare quella proprietà a 1, 1 per un'istanza specifica rivela un sovrascarico in grassetto:

Per qualsiasi valore di proprietà sostituito, puoi fare clic con il pulsante destro del mouse nella finestra Proprietà e selezionare Ripristina a valore predefinito per ripristinarlo al valore stilizzato o al valore della proprietà predefinita se non è stato stilizzato.