Phong cách UI

*Nội dung này được dịch bằng AI (Beta) và có thể có lỗi. Để xem trang này bằng tiếng Anh, hãy nhấp vào đây.

Phong cách UI là giải pháp Roblox cho các trang tính, tương tự như CSS, cho phép bạn tuyên bố và áp dụng toàn cầu các lỗi trên các thuộc tính của instancia UI.Hỗ trợ cấp độ động cơ này là nền tảng cho Trình biên tập phong cách và đường ống dẫn token cuối cùng.

Khái niệm

Style quy tắc (phần của một StyleSheet ) áp dụng cho mọi ví dụ phù hợp với định nghĩa Selector của quy tắc để phù hợp với các tính năng như tên lớp, tên instance và các mối quan hệ cấu trúc.Xem tài liệu Selector chi tiết để có thêm thông tin.

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

Phong cách chủ đề , được cấu hình thông qua thuộc tính của một chủ đề , bao gồm các bộ token cụ thể có thể được thay thế, ví dụ như token màu định nghĩa một chủ đề "ánh sáng" và "bóng tối".Các chủ đề liên quan phải có cùng một bộ token để hoạt động đúng.

Sự lan truyền quy tắc

Một ví dụ 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 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 của Selector

Ở cấp cao, phù hợp và chỉnh sửa ví dụ thông qua định nghĩa Selector của một quy tắc hoạt động thông qua:

  • Các máy chọn lớp Roblox class mục tiêu tất cả các thực thể của một lớp đã cho, ví dụ class, class, class, v.v.
  • Thẻ ví dụ được áp dụng cho các đối tượng UI cụ thể thông qua CollectionService .
  • Tên ví dụ lựa chọn theo giá trị của đối tượng UI Instance.Name .
  • Ví dụ modifiers , tương tự như CSS pseudo-Elements , được áp dụng thông qua phantom UIComponents như UICorner hoặc UIStroke .
  • GuiObject tình trạng lựa chọn, tương tự như lựa chọn CSS pseudo-class , phù hợp với một trong bốn giá trị GuiState 枚列值 như Hover .

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

Lớp chọn UI

local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local screenGui = script.Parent
-- Xu thời gian
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 -- Xác định 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 -- Xác định token toàn cầu
tokensDerive.Parent = themeB
themeB:SetAttribute("FrameSize", "$SquareL")
themeB:SetAttribute("FrameColor", "$Magenta")
-- Tờ Thiết Kế
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "DesignSheet"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB -- Xuất phát từ ThemeB
themeDerive.Parent = designSheet
-- Liên kết DesignSheet với ScreenGui
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = designSheet
styleLink.Parent = screenGui
-- Tùy chỉnh quy tắc
local rule = Instance.new("StyleRule")
rule.Selector = "Frame" -- Lựa chọn lớp
rule.Parent = designSheet
-- Đặt tính chất quy tắc
rule:SetProperties({
["BackgroundColor3"] = "$FrameColor",
["Size"] = "$FrameSize",
["BorderSizePixel"] = 0
})
local frame = Instance.new("Frame")
frame.Parent = screenGui

Sửa đổi các thuộc tính

Các thuộc tính của instance bị ảnh hưởng bởi phong cách được đánh dấu bằng một trong cửa sổ Tính năng , và di chuột qua một thuộc tính bị ảnh hưởng cho thấy phong cách nào đang ảnh hưởng đến nó. ví dụ, nếu một quy tắc phong cách nói với một thẻ được gắn thẻ sử dụng một của , thuộc tính của đối tượng sẽ hiển thị giá trị mặc định của nhưng thực tế của nó sẽ sử dụng giá trị của quy tắc có phong cách .

Khi giá trị mặc định hoặc có phong cách của một thuộc tính được sửa đổi thêm cho một đối tượng UI cụ thể, nó trở thành in đậm để chỉ ra một giá trị bị áp đặt.Ví dụ — giả sử một mặc định AnchorPoint của 0, 0  — thiết lập thuộc tính đó cho 1, 1 cho một ví dụ cụ thể tiết lộ một sự thay thế in đậm:

Đối với bất kỳ giá trị thay thế cho tính năng nào, bạn có thể nhấp chuột phải vào cửa sổ Tính năng và chọn Đặt lại về mặc định để phục hồi nó về giá trị có định dạng, hoặc về giá trị tính năng mặc định nếu nó chưa được định dạng.