CSS Vergleiche

UI-Styling und verwandte Workflows befinden sich derzeit in der Beta und müssen über Datei ⟩ Beta-Funktionen ⟩ UI Styling.

Die meisten CSS-Konzepte korrelieren mit den Roblox-Stilkonzepten. Die folgenden Beispiele zeigen, wie CSS und HTML mit Luau und Roblox-Klassen/Eigenschaften übereinstimmen.

Um jedes der folgenden Luau-Skriptbeispiele zu testen:

Erstellen Sie im Explorer Folgendes:
1. StyleSheet-Instanz mit dem Namen CoreSheet innerhalb von ReplicatedStorage.
2. Leere StyleRule-Instanz als Kind von CoreSheet.
3. ScreenGui-Container in StarterGui.
4. LocalScript-Instanz innerhalb von ScreenGui.
5. StyleLink-Objekt innerhalb von ScreenGui, dessen StyleSheet-Eigenschaft mit CoreSheet verknüpft ist.

Fügen Sie im LocalScript den folgenden unterstützenden Code ein:

LocalScript
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local coreSheet = ReplicatedStorage:FindFirstChild("CoreSheet")
local rule = coreSheet:FindFirstChildWhichIsA("StyleRule")
local screenGui = script.Parent

Fügen Sie für jedes Beispiel unten die Luau-Codezeilen nach den unterstützenden Zeilen 1–6 ein.

Selektoren

Die Selector-Eigenschaft einer StyleRule gibt an, welche Instanzen die Regel betreffen soll. Die folgenden Selektortypen von CSS zu Luau können mit Kombinatoren verwendet werden.

Element

Entspricht den CSS-Elementselektoren sind die Roblox Klassenselektoren, die alle Instanzen einer bestimmten GuiObject-Klasse auswählen, zum Beispiel Frame, ImageLabel, TextButton usw.

CSS
button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 15%;
	height: 40px;
	border: none;
}

HTML
<button>Main Menu</button>

Luau
-- Klassenselektor
rule.Selector = "TextButton"

-- Regel-Eigenschaften festlegen
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.15, 0, 0, 40),
	["BorderSizePixel"] = 0
})

local button = Instance.new("TextButton")
button.Text = "Main Menu"
button.Parent = screenGui

Klasse

Das Roblox-Gegenstück zu CSS class-Selektoren sind Tag-Selektoren, die Tags nutzen, die über den CollectionService angewendet werden.

CSS
.button-primary {
	background-color: #335FFF;
	color: #E1E1E1;
}

HTML
<button class="button-primary">Main Menu</button>

Luau
-- Tag-Selektor
rule.Selector = ".ButtonPrimary"

-- Regel-Eigenschaften festlegen
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["AutomaticSize"] = Enum.AutomaticSize.XY
})

local button = Instance.new("TextButton")
button.Text = "Main Menu"
button.Parent = screenGui
-- Tag auf Button anwenden
CollectionService:AddTag(button, "ButtonPrimary")

Der nächstgelegene Roblox-Vergleich zu CSS id ist der #[name]-Selektor, der nach dem Wert von Instance.Name auswählt. Im Gegensatz zur W3C-Spezifikation des id-Attributs wird nicht erwartet, dass Namen eindeutig sind.

CSS
#modal-frame {
	background-color: #000022;
	opacity: 0.5;
	width: 50%;
	min-height: 100px;
}

HTML
<div id="modal-frame"></div>

Luau
-- Instanzname-Selektor
rule.Selector = "#ModalFrame"

-- Regel-Eigenschaften festlegen
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("000022"),
	["BackgroundTransparency"] = 0.5,
	["Size"] = UDim2.new(0.5, 0, 0, 100),
	["AutomaticSize"] = Enum.AutomaticSize.Y
})

local frame = Instance.new("Frame")
frame.Parent = screenGui
-- Frame umbenennen, um dem Selektor zu entsprechen
frame.Name = "ModalFrame"

Kombinatoren

Kombinatoren ermöglichen es Ihnen, grundlegende Selektoren zu mischen, um tiefere Hierarchiebeziehungen zuzuordnen.

Kind

Der Kind-Selektor > ist zwischen CSS und Roblox identisch.

CSS
.menu-container {
	width: 25%;
}

.menu-container > button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 80%;
	height: 40px;
	border: none;
}

HTML
<div class="menu-container">
	<button>Options</button>
</div>

Luau
-- Kind-Selektor
rule.Selector = ".MenuContainer > TextButton"

-- Regel-Eigenschaften für Kind festlegen
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Menücontainer erstellen
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Tag anwenden
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Button erstellen
local button = Instance.new("TextButton")
button.Text = "Options"
-- Menücontainer als Elternteil des Buttons festlegen
button.Parent = menuContainer

Nachkomme

Im Gegensatz zur CSS-Leerzeichensyntax, zum Beispiel .menu-container button, verwendet Roblox den >>-Kombinator, um eine Nachkommenbeziehung anzuzeigen.

CSS
.menu-container {
	width: 25%;
}

.sub-container {
	width: 75%;
}

.menu-container button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 80%;
	height: 40px;
	border: none;
}

HTML
<div class="menu-container">
	<div class="sub-container">
		<button>Options</button>
	</div>
</div>

Luau
-- Nachkommen-Selektor
rule.Selector = ".MenuContainer >> TextButton"

-- Regel-Eigenschaften für Nachkommen festlegen
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Menükontainer erstellen
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Tag anwenden
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Untercontainer erstellen
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Menücontainer als Elternteil des Untercontainers festlegen
subContainer.Parent = menuContainer

-- Button erstellen
local button = Instance.new("TextButton")
button.Text = "Options"
-- Untercontainer als Elternteil des Buttons festlegen
button.Parent = subContainer

Selektorliste

Mehrere Selektoren (einschließlich Selektoren mit Kombinatoren) können im selben Eigenschaftenblock deklariert werden, getrennt durch Kommas, um Redundanz zu verringern.

CSS
img, p {
	background-color: #FF0033;
}

HTML
<img src="gear.png" width="100" height="100">

<p>Main Menu</p>

Luau
-- Selektor für Bildlabels UND Textlabels
rule.Selector = "ImageLabel, TextLabel"

-- Gemeinsame Eigenschaft für Klassen festlegen
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

-- Bildlabel erstellen
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui

-- Textlabel erstellen
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 0, 0)
textLabel.AutomaticSize = Enum.AutomaticSize.Y
textLabel.TextXAlignment = Enum.TextXAlignment.Left
textLabel.TextYAlignment = Enum.TextYAlignment.Top
textLabel.Text = "Main Menu"
textLabel.Parent = screenGui

Pseudo-Klassen

Das Roblox-Gegenstück zu CSS Pseudo-Klassen Selektoren sind Zustandsselektoren, die einer der vier Enum.GuiState-Werte entsprechen, wie Hover oder Press.

CSS
img:hover {
	opacity: 0.5;
}

HTML
<img src="gear.png" width="100" height="100">

Luau
-- Zustandsselektor
rule.Selector = "ImageLabel:Hover"

-- Regel-Eigenschaft festlegen
rule:SetProperty("ImageTransparency", 0.5)

-- Bildlabel erstellen
local label = Instance.new("ImageLabel")
label.Image = "rbxassetid://104919049969988"
label.Size = UDim2.new(0, 100, 0, 100)
label.BackgroundTransparency = 1
label.Parent = screenGui

Pseudo-Instanzen

Ähnlich wie CSS Pseudo-Elemente spezifische Teile eines Elements modifizieren können, kann Roblox phantome UIComponents über die Selector-Eigenschaft einer Stilregel erstellen. Beispielsweise erzeugt die folgende Regel effektiv einen UICorner-Modifikator unter jedem Frame, der mit RoundedCorner20 getaggt ist, und setzt den CornerRadius jedes Modifikators auf 20 Pixel.

Luau
-- UI-Komponenten-Selektor
rule.Selector = "Frame.RoundedCorner20::UICorner"

-- Regel-Eigenschaft festlegen
rule:SetProperty("CornerRadius", UDim.new(0, 20))

-- Frame erstellen
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Tag auf Frame anwenden
CollectionService:AddTag(frame, "RoundedCorner20")

Variablen

CSS ermöglicht es Ihnen, Variablen im gesamten Stilsystem zu deklarieren und zu referenzieren. Roblox erreicht dies durch Tokens und das Instanzattribute System. Mit $ als Präfix können Sie Attribute referenzieren, die in einer StyleRule oder StyleSheet Vererbungskette deklariert wurden, während Sie die Stil-Eigenschaften festlegen.

CSS
:root {
	--button-bg-color: #335FFF;
	--button-text-color: #E1E1E1;
}

button {
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
}

HTML
<button>Main Menu</button>

Luau
-- Stilblatt-Tokens mit Attributen festlegen
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

-- Klassenselektor
rule.Selector = "TextButton"

-- Regel-Eigenschaften festlegen
rule:SetProperties({
	["BackgroundColor3"] = "$ButtonBgColor",
	["TextColor3"] = "$ButtonTextColor"
})

-- Button erstellen
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Main Menu"
button.Parent = screenGui

Verschachtelung und Zusammenführung

Ein Konzept von SCSS entlehnend, können StyleRules zusammen verschachtelt werden und ihre Selektoren werden zusammengeführt.

SCSS
#menu-frame {
	background-color: #000022;
	width: 25%;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	
	> button {
		background-color: #335FFF;
		color: #E1E1E1;
		width: 80%;
		height: 40px;
		border: none;
		
		&:hover {
			opacity: 0.5;
		}
	}
}

HTML
<div id="menu-frame">
	<button>Charms</button>
	<button>Mana</button>
	<button>Scrolls</button>  
</div>

Luau
-- Menürahmenregel
local menuFrameRule = Instance.new("StyleRule")
menuFrameRule.Parent = coreSheet
menuFrameRule.Selector = "#MenuFrame"
menuFrameRule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("000022"),
	["Size"] = UDim2.new(0.25, 0, 0, 200),
	["AutomaticSize"] = Enum.AutomaticSize.Y
})

-- Menülayoutregel
local menuLayoutRule = Instance.new("StyleRule")
menuLayoutRule.Parent = menuFrameRule  -- Menürahmenregel als Elternteil festlegen
menuLayoutRule.Selector = "::UIListLayout"
menuLayoutRule:SetProperties({
	["FillDirection"] = Enum.FillDirection.Vertical,
	["VerticalFlex"] = Enum.UIFlexAlignment.SpaceEvenly,
	["HorizontalAlignment"] = Enum.HorizontalAlignment.Center
})

-- Buttonregel
local buttonRule = Instance.new("StyleRule")
buttonRule.Parent = menuFrameRule  -- Menürahmenregel als Elternteil festlegen
buttonRule.Selector = "> TextButton"
buttonRule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Button Hoverregel
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Parent = buttonRule  -- Buttonregel als Elternteil festlegen
buttonHoverRule.Selector = ":hover"
buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)

-- Elternrahmen erstellen
local menuFrame = Instance.new("Frame")
menuFrame.Parent = screenGui
menuFrame.Name = "MenuFrame"

-- Buttons im Rahmen erstellen
local button1 = Instance.new("TextButton")
button1.Text = "Charms"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "Mana"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "Scrolls"
button3.Parent = menuFrame