Arayüz stili

Arayüz tasarımı, stil şablonlarına benzer bir Roblox çözümü, CSS'ye benzer, UI istemci özelliklerine üzerinde değişiklikler ilan etmenizi ve küresel olarak uygulamanızı sağlar.Bu motor seviyesi desteği, Tarz Editörü ve uçtan uca token boru hattının temelidir.

Kavramlar

Stil kuralları (bir StyleSheet kuralının tanımına uyan her duruma uygulanır) kuralların Selector özellikleriyle eşleşen her duruma uygulanır, örneğin sınıf adı, instans adı ve hiyerarşi ilişkileri gibi özellikler.Detaylar için Selector belgelerine bakın.

Stil jetonları , bir jetonun öznitelikleri aracılığıyla tanımlanmış, stiller ve bileşenler arasında kullanılabilecek UI özellik değişkenlerini temsil eder, örneğin bir , ve için ortak bir renk.Jetonlar CSS değişkenlerine benzerdir.

Tarz temaları , bir temanın öznitelikleri aracılığıyla yapılandırılmış, örneğin bir "hafif" ve "karanlık" tema tanımlayan özel jeton setlerinden oluşur.İlgili temaların doğru çalışması için aynı token setine sahip olması gerekir.

Kural yayılması

Bir StyleLink örneği bir StyleSheet ve ilişkili kurallarını bir ebeveyn ScreenGui ve içindeki tüm GuiObjects ile bağlar.Sadece bir StyleSheet belli bir ağa uygulanabilir.

Seçici tanımları

Yüksek düzeyde, bir kuralın Selector tanımı aracılığıyla instans eşleştirme ve değiştirme işlemleri şunun aracılığıyla gerçekleşir:

• Örneğin, örnek bir sınıfın tüm örneklerini hedef alan Roblox sınıfı seçiciler, örneğin örneği, örneği, örneği vb.
• Örnek etiketleri özel UI nesnelerine CollectionService.
• Arayüz nesnesinin değerine göre durum adı seçimi Instance.Name.
• Örnek modifiye edicileri , CSS pseudo-öğelerine benzer, phantom aracılığıyla uygulanan, örneğin veya gibi.
• GuiObject durum seçicileri, CSS pseudo-sınıfı seçicilerine benzer, ki bunlar dört GuiState enum değerden birine karşılır, örneğin Hover .

Aşağıdaki kurulum, büyüklük ve renk jetonlarının, bir tema ve 200×200 piksel boyutundaki bir sınıf seçicisinin nasıl bir magenta ürettiğini gösterir.

Arayüz Sınıf Seçicisi
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local screenGui = script.Parent

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

-- KonuA
local themeA = Instance.new("StyleSheet")
themeA.Name = "ThemeA"
themeA.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Küresel jetonları derleme
tokensDerive.Parent = themeA
themeA:SetAttribute("FrameSize", "$SquareM")
themeA:SetAttribute("FrameColor", "$Aqua")

-- TemaB
local themeB = Instance.new("StyleSheet")
themeB.Name = "ThemeB"
themeB.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Küresel jetonları derleme
tokensDerive.Parent = themeB
themeB:SetAttribute("FrameSize", "$SquareL")
themeB:SetAttribute("FrameColor", "$Magenta")

-- Tasarım Sayfası
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "DesignSheet"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB  -- ThemeB'den Derleme
themeDerive.Parent = designSheet

-- Bağlantı Tasarım Kapağını Ekran Düzenine Yönlendirme Link DesignSheet to ScreenGui
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = designSheet
styleLink.Parent = screenGui

-- Kuralı yapılandır
local rule = Instance.new("StyleRule")
rule.Selector = "Frame"  -- Sınıf seçici
rule.Parent = designSheet

-- Kural özelliklerini ayarla
rule:SetProperties({
	["BackgroundColor3"] = "$FrameColor",
	["Size"] = "$FrameSize",
	["BorderSizePixel"] = 0
})

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

Değiştirilen özellikler

Stilin etkilendiği örnek özellikleri ⚠ ile işaretlenir Özellikler penceresinde ve etkilenen bir özellik üzerinde gezinmek, hangi stilin onu etkilediğini gösterir.Örneğin, bir stiller kuralı bir etiketli ı bir 'in kullanmasını söylerse, bu nesne özelliği 'in varsayılan değerini gösterir, ancak aslındaki özelliği kuralın stil değerini kullanır.

Varsayılan veya stilli bir özellik değeri belirli bir UI nesnesi için daha fazla değiştirildiğinde, geçersiz bir değeri belirtmek için cesur hale gelir.Örneğin - varsayılan bir örneği olarak varsayalım için belirli bir örnek için bu özelliği ayarlamak baskın bir geçersizleştirme ortaya koyar:

Herhangi bir geçersiz özellik değeri için, Özellikler penceresinde sağ tıklayabilir ve Varsayılana döndür seçerek stilli değere veya varsayılan özellik değerine geri döndürebilirsiniz, eğer stillenmediyse.