Stylowanie interfejsu

*Ta zawartość została przetłumaczona przy użyciu narzędzi AI (w wersji beta) i może zawierać błędy. Aby wyświetlić tę stronę w języku angielskim, kliknij tutaj.

Stylowanie interfejsu to rozwiązanie Roblox dla arkuszy stylów, podobne do CSS, które pozwala deklarować i globalnie stosować nadpisy do właściwości instancji interfejsu.Wsparcie na poziomie silnika jest podstawą dla edytora stylów i rury przepływu tokenów od końca do końca.

Koncepcje

Style zasady (część z StyleSheet ) dotyczą każdej instancji, która spełnia definicję reguły Selector w celu dopasowania cech takich jak nazwa klasy, nazwa instancji i relacje hierarchiczne.Zobacz dokumentację Selector na szczegóły.

Style tokenów , zdefiniowane za pomocą atrybutów tokena StyleSheet , reprezentują zmienne właściwości interfejsu, które można używać w stylach i komponentach, na przykład wspólny kolor dla Frame.BackgroundColor3 , TextLabel.TextColor3 i UIStroke.Color .Żetony są porównywalne z zmiennymi CSS .

Styl motywów , skonfigurowany za pomocą atrybutów motywu , składa się z zestawów konkretnych tokenów, które można wymienić, na przykład kolorowe tokeny definiujące temat "światła" i "ciemności".Powiązane tematy muszą mieć taki sam zestaw tokenów, aby poprawnie działać.

Propagacja zasady

Instancja StyleLink łączy StyleSheet i jej związane z nią zasady z rodzicem ScreenGui i całym GuiObjects w nim.Tylko jeden StyleSheet może odnieść się do danego drzewa.

Definicje selektora

Na wysokim poziomie dopasowanie i modyfikacja instancji za pomocą definicji Selector reguły działa poprzez:

  • Selektory klasy Roblox które celują we wszystkie instancje określonej klasy, na przykład , , , itp.
  • Tagi instancji zostały zastosowane do konkretnych obiektów UI za pośrednictwem .
  • Wybór instancji nazwy zgodnie z wartością obiektu UI .
  • Instancja modyfikatory , podobne do CSS pseudo-elementów , zastosowane za pomocą fantomu UIComponents takich jak UICorner lub UIStroke .
  • GuiObject stan selektory, podobne do CSS pseudo-klasy selektorów, które odpowiadają jednej z czterech GuiState wartości enumeracyjnych, takich jak Hover .

Następująca konfiguracja pokazuje, jak żetki rozmiaru i koloru, motyw i selektor klasy "Frame" wytwarzają magentowy Frame o rozmiarze 200×200 pikseli.

Selektor klasy UI
local CollectionService = game:GetService("CollectionService")

local ReplicatedStorage = game:GetService("ReplicatedStorage")



local screenGui = script.Parent



-- Żetony

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"))



-- MotywA

local themeA = Instance.new("StyleSheet")

themeA.Name = "ThemeA"

themeA.Parent = ReplicatedStorage

local tokensDerive = Instance.new("StyleDerive")

tokensDerive.StyleSheet = tokens  -- Derwuj globalne tokeny

tokensDerive.Parent = themeA

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

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



-- MotywB

local themeB = Instance.new("StyleSheet")

themeB.Name = "ThemeB"

themeB.Parent = ReplicatedStorage

local tokensDerive = Instance.new("StyleDerive")

tokensDerive.StyleSheet = tokens  -- Derwuj globalne tokeny

tokensDerive.Parent = themeB

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

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



-- Tabela projektowa

local designSheet = Instance.new("StyleSheet")

designSheet.Name = "DesignSheet"

designSheet.Parent = ReplicatedStorage

local themeDerive = Instance.new("StyleDerive")

themeDerive.StyleSheet = themeB  -- Wywodź z ThemeB

themeDerive.Parent = designSheet



-- Połącz arkusz projektu linków z ScreenGui

local styleLink = Instance.new("StyleLink")

styleLink.StyleSheet = designSheet

styleLink.Parent = screenGui



-- Konfiguruj zasadę

local rule = Instance.new("StyleRule")

rule.Selector = "Frame"  -- Selektor klasy

rule.Parent = designSheet



-- Ustaw właściwości zasady

rule:SetProperties({

	["BackgroundColor3"] = "$FrameColor",

	["Size"] = "$FrameSize",

	["BorderSizePixel"] = 0

})



local frame = Instance.new("Frame")

frame.Parent = screenGui

Modyfikowane właściwości

Właściwości instancji dotknięte stylizacją są oznaczane znacznikiem ⚠ w oknie Właściwości , a przewijanie właściwości dotkniętej stylizacją pokazuje, jaki styl ją wpływa.Na przykład, jeśli zasada stylu mówi do oznaczonych Frame użyć AnchorPoint z 0.5, 0.5 , właściwość obiektu pokaże domyślną wartość **** z 0, 0 ale jej rzeczywista wartość AnchorPoint będzie używać wartości zasady stylizowanej .

Gdy domyślna lub stylizowana wartość właściwości zostanie dalej zmodyfikowana dla określonego obiektu interfejsu użytkownika, staje się pogrubiona w celu wskazania zmienionej wartości.Na przykład — załóżmy domyślną wartość AnchorPoint0, 0  — ustawienie tej właściwości na 1, 1 dla konkretnej instancji ujawnia przejęcie w pogrubieniu:

Dla każdej zmienionej wartości właściwości możesz ją prawym przyciskiem kliknąć w oknie Właściwości i wybrać Zresetuj do domyślnej wartości , aby przywrócić ją do stylowanej wartości lub do domyślnej wartości właściwości, jeśli nie została stylizowana.