Gaya UI | Dokumentasi - Pusat Kreator Roblox

Gaya UI adalah solusi Roblox untuk stylesheet, mirip dengan CSS, yang memungkinkan Anda menyatakan dan menerapkan penggantian secara global pada properti instance UI. Dukungan tingkat mesin ini adalah fondasi untuk Editor Gaya dan pipeline token end-to-end.

Konsep

Aturan gaya (bagian dari StyleSheet) berlaku untuk setiap instance yang cocok dengan definisi Selector dari aturan tersebut untuk mencocokkan karakteristik seperti nama kelas, nama instance, dan hubungan hierarki. Lihat dokumentasi Selector untuk rincian lebih lanjut.

Token gaya, yang didefinisikan melalui atribut dari token StyleSheet, mewakili variabel properti UI yang dapat digunakan di berbagai gaya dan komponen, misalnya, warna umum untuk Frame.BackgroundColor3, TextLabel.TextColor3, dan UIStroke.Color. Token dapat dibandingkan dengan variabel CSS.

Tema gaya, yang dikonfigurasi melalui atribut dari tema StyleSheet, terdiri dari set token spesifik yang dapat dipertukarkan, misalnya token warna yang mendefinisikan tema "terang" dan "gelap". Tema terkait harus memiliki set token yang sama agar berfungsi dengan benar.

Kueri gaya memungkinkan Anda menerapkan gaya secara kondisional berdasarkan konteks atau lingkungan UI. Ini dapat dibandingkan dengan kueri kontainer dan kueri media CSS, memungkinkan UI beradaptasi dengan ukuran layar, jenis input, atau pengaturan aksesibilitas pengguna.

Propagasi aturan

Instance StyleLink menghubungkan StyleSheet dan aturan yang terasosiasi dengannya ke ScreenGui induk dan semua GuiObjects di dalamnya. Hanya satu StyleSheet yang dapat diterapkan pada sebuah pohon tertentu.

Definisi pemilih

Secara garis besar, pencocokan instance dan modifikasi melalui definisi Selector dari suatu aturan bekerja melalui:

Pemilih kelas Roblox yang menargetkan semua instance dari kelas GuiObject tertentu, misalnya Frame, ImageLabel, TextButton, dll.
Tag instance yang diterapkan pada objek UI tertentu melalui CollectionService.
Seleksi nama instance menurut nilai dari Instance.Name objek UI.
Modifier instance, mirip dengan pseudo-elemen CSS, yang diterapkan melalui UIComponents phantom seperti UICorner atau UIStroke.
Pemilih state GuiObject, mirip dengan pemilih pseudo-kelas CSS, yang sesuai dengan salah satu dari empat nilai enum GuiState seperti Hover.
Pemilih kueri Roblox, mirip dengan kueri kontainer dan media CSS, yang menggunakan awalan @ untuk menerapkan gaya hanya saat instance StyleQuery atau pseudo‑instance dengan nama yang sama aktif.

Pengaturan berikut menunjukkan bagaimana token ukuran dan warna, tema, dan pemilih kelas "Frame" menghasilkan Frame berwarna magenta dengan ukuran 200×200 piksel.

Kode Setara

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

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

-- TemaB
local themeB = Instance.new("StyleSheet")
themeB.Name = "TemaB"
themeB.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Derive global tokens
tokensDerive.Parent = themeB
themeB:SetAttribute("FrameSize", "$SquareL")
themeB:SetAttribute("FrameColor", "$Magenta")

-- DesainSheet
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "DesignSheet"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB  -- Derive dari TemaB
themeDerive.Parent = designSheet

-- Menghubungkan DesignSheet ke ScreenGui
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = designSheet
styleLink.Parent = screenGui

-- Konfigurasi aturan
local rule = Instance.new("StyleRule")
rule.Selector = "Frame"  -- Pemilih kelas
rule.Parent = designSheet

-- Set properti aturan
rule:SetProperties({
	["BackgroundColor3"] = "$FrameColor",
	["Size"] = "$FrameSize",
	["BorderSizePixel"] = 0
})

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

Properti yang Dimodifikasi

Properti instance yang dipengaruhi oleh gaya ditandai dengan ⚠ di jendela Properties, dan mengarahkan mouse ke atas properti yang terpengaruh menunjukkan gaya mana yang mempengaruhinya. Misalnya, jika suatu aturan gaya menyuruh Frame yang ditandai untuk menggunakan AnchorPoint dari 0.5, 0.5, properti objek tersebut akan menunjukkan nilai default dari 0, 0 tetapi AnchorPoint aktualnya akan menggunakan nilai styled dari aturan tersebut.

Ketika nilai properti default atau styled dimodifikasi lebih lanjut untuk suatu objek UI tertentu, itu menjadi tebal untuk menunjukkan nilai yang diubah. Misalnya — dengan asumsi AnchorPoint default adalah 0, 0 — mengatur properti itu menjadi 1, 1 untuk instance tertentu mengungkapkan suatu penggantian yang ditunjukkan dalam tebal:

Untuk setiap nilai properti yang diubah, Anda dapat mengklik kanan pada nilai tersebut di jendela Properties dan memilih Reset to Default untuk mengembalikannya ke nilai styled, atau ke nilai properti default jika belum distyled.