Phong cách UI | Tài liệu - Trung Tâm Nhà Sáng Tạo Roblox

Phong cách UI là một giải pháp của Roblox cho các bảng kiểu, tương tự như CSS, cho phép bạn khai báo và áp dụng toàn cầu các thay đổi cho các thuộc tính của đối tượng UI. Hỗ trợ ở cấp engine này là nền tảng cho Trình Chỉnh sửa Kiểu và dòng token từ đầu đến cuối.

Khái niệm

Quy tắc kiểu (một phần của StyleSheet) áp dụng cho mọi đối tượng phù hợp với định nghĩa Selector của quy tắc để khớp các đặc điểm như tên lớp, tên đối tượng và mối quan hệ phân cấp. Xem tài liệu Selector để biết thêm chi tiết.

Token kiểu, được xác định thông qua thuộc tính của một StyleSheet token, đại diện cho các biến thuộc tính UI có thể được sử dụng trên khắp các kiểu và thành phần, chẳng hạn như một màu chung cho Frame.BackgroundColor3, TextLabel.TextColor3, và UIStroke.Color. Các token có thể được so sánh với các biến trong CSS.

Chủ đề kiểu, được cấu hình thông qua thuộc tính của một StyleSheet chủ đề, bao gồm các bộ token cụ thể có thể được hoán đổi, chẳng hạn như các token màu xác định một chủ đề "sáng" và "tối". Các chủ đề liên quan phải có cùng một bộ token để hoạt động chính xác.

Truy vấn kiểu cho phép bạn áp dụng các kiểu theo điều kiện dựa trên ngữ cảnh hoặc môi trường của UI. Những truy vấn này tương đương với các truy vấn container và truy vấn truyền thông trong CSS, cho phép UI thích ứng với kích thước màn hình, loại đầu vào hoặc cài đặt truy cập của người dùng.

Sự lan truyền quy tắc

Một phiên bản StyleLink liên kết một StyleSheet và các quy tắc liên quan của nó với một ScreenGui cha và tất cả các GuiObjects bên trong nó. Chỉ một StyleSheet có thể áp dụng cho một cây nhất định.

Định nghĩa bộ chọn

Ở mức cao, việc khớp và sửa đổi đối tượng thông qua định nghĩa Selector của một quy tắc hoạt động thông qua:

Bộ chọn lớp của Roblox, nhắm tới tất cả các đối tượng của một lớp GuiObject nhất định, chẳng hạn như Frame, ImageLabel, TextButton, v.v.
Thẻ đối tượng áp dụng cho các đối tượng UI cụ thể thông qua CollectionService.
Lựa chọn tên đối tượng theo giá trị của Instance.Name của đối tượng UI.
Bộ chỉnh đối tượng, tương tự như pseudo-elements trong CSS, áp dụng thông qua các UIComponents ẩn như UICorner hoặc UIStroke.
Bộ chọn trạng thái GuiObject, tương tự như pseudo-class trong CSS, tương ứng với một trong bốn giá trị của enum GuiState như Hover.
Bộ chọn truy vấn Roblox, tương tự như truy vấn container và media trong CSS, mà sử dụng tiền tố @ để áp dụng các kiểu chỉ khi một phiên bản StyleQuery hoặc pseudo‑instance cùng tên đang hoạt động.

Cài đặt sau đây cho thấy cách mà các token kích thước và màu sắc, một chủ đề, và một bộ chọn lớp của "Frame" sản xuất một Frame màu magenta với kích thước 200×200 pixel.

Tương đương mã

Bộ chọn lớp UI
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local screenGui = script.Parent

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

-- Chủ đề A
local themeA = Instance.new("StyleSheet")
themeA.Name = "ThemeA"
themeA.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Lấy các token toàn cầu
tokensDerive.Parent = themeA
themeA:SetAttribute("FrameSize", "$SquareM")
themeA:SetAttribute("FrameColor", "$Aqua")

-- Chủ đề B
local themeB = Instance.new("StyleSheet")
themeB.Name = "ThemeB"
themeB.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Lấy các token toàn cầu
tokensDerive.Parent = themeB
themeB:SetAttribute("FrameSize", "$SquareL")
themeB:SetAttribute("FrameColor", "$Magenta")

-- Bảng thiết kế
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "DesignSheet"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB  -- Lấy từ Chủ đề B
themeDerive.Parent = designSheet

-- Liên kết Bảng thiết kế với ScreenGui
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = designSheet
styleLink.Parent = screenGui

-- Cấu hình quy tắc
local rule = Instance.new("StyleRule")
rule.Selector = "Frame"  -- Bộ chọn lớp
rule.Parent = designSheet

-- Thiết lập thuộc tính quy tắc
rule:SetProperties({
	["BackgroundColor3"] = "$FrameColor",
	["Size"] = "$FrameSize",
	["BorderSizePixel"] = 0
})

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

Thuộc tính đã được sửa đổi

Các thuộc tính của đối tượng bị ảnh hưởng bởi phong cách được đánh dấu bằng ⚠ trong cửa sổ Thuộc tính, và khi di chuột qua một thuộc tính bị ảnh hưởng sẽ hiển thị phong cách nào đang ảnh hưởng đến nó. Ví dụ, nếu một quy tắc phong cách yêu cầu một Frame có thẻ sử dụng AnchorPoint là 0.5, 0.5, thuộc tính đối tượng đó sẽ hiển thị giá trị mặc định là 0, 0 nhưng giá trị AnchorPoint thực tế của nó sẽ sử dụng giá trị đã định hình của quy tắc.

Khi giá trị thuộc tính mặc định hoặc đã định hình được sửa đổi thêm cho một đối tượng UI cụ thể, nó sẽ trở thành đậm để chỉ ra giá trị đã được ghi đè. Ví dụ — giả sử một AnchorPoint mặc định là 0, 0 — thiết lập thuộc tính đó thành 1, 1 cho một phiên bản cụ thể sẽ hiển thị một ghi đè bằng chữ đậm:

Đối với bất kỳ giá trị thuộc tính nào đã được ghi đè, bạn có thể nhấp chuột phải vào nó trong cửa sổ Thuộc tính và chọn Đặt lại để Mặc định để đưa nó trở lại giá trị đã định hình, hoặc trở lại giá trị thuộc tính mặc định nếu nó chưa được định hình.