การเปรียบเทียบ CSS

props.leadIn ไฟล์ > คุณสมบัติเบต้า > props.betaName props.leadOut

แนวคิด CSS ส่วนใหญ่จะแผนที่ไปยังแนวคิดการจัดรูปแบบของ Roblox ตัวอย่างต่อไปนี้แสดงวิธีที่ CSS และ HTML สอดคล้องกับ Luau และคลาส/คุณสมบัติของ Roblox

เพื่อทดสอบแต่ละตัวอย่างสคริปต์ Luau ต่อไปนี้:

ใน สํารวจ สร้างสิ่งต่อไปนี้:
1. StyleSheet ตัวอย่างที่ชื่อว่า CoreSheet อยู่ภายใน ReplicatedStorage .
2. ตัวอย่างว่างเปล่า StyleRule ในฐานะลูกของ CoreSheet .
3. ScreenGui คอนเทนเนอร์ใน StarterGui .
4. LocalScript ตัวอย่างภายใน ScreenGui
5. StyleLink วัตถุภายใน ScreenGui ที่มีคุณสมบัติ StyleSheet ถูกเชื่อมโยงกับ CoreSheet .

ใน 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

สําหรับแต่ละตัวอย่างด้านล่างให้วางเส้นโค้ด Luau ตามเส้นสนับสนุน 1–6

ตัวเลือก

คุณสมบัติ Selector ของ StyleRule ระบุว่าตัวอย่างใดที่กฎควรมีผลกระทบประเภทตัวเลือกต่อไปนี้แผนที่จาก CSS เป็น Luau และสามารถใช้ร่วมกับตัวผสานได้

องค์ประกอบ

เทียบเท่ากับตัวเลือกองค์ประกอบ CSS คือ Roblox ตัวเลือกคลาส ซึ่งเลือกทุกตัวอย่างของคลาสที่กำหนด GuiObject ตัวอย่างเช่น Frame , ImageLabel , TextButton ฯลฯ

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

HTML
<button>Main Menu</button>

ลูอา
-- ตัวเลือกคลาส
rule.Selector = "TextButton"

-- ตั้งค่าคุณสมบัติกฎ
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

คลาส

ตัวเทียบเท่า Roblox ของ CSS class ตัวเลือกจะเป็น ตัวเลือกแท็ก ซึ่งใช้ แท็ก ที่ใช้ผ่าน CollectionService

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

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

ลูอา
-- ตัวเลือกแท็ก
rule.Selector = ".ButtonPrimary"

-- ตั้งค่าคุณสมบัติกฎ
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
-- ใช้แท็กกับปุ่ม
CollectionService:AddTag(button, "ButtonPrimary")

ตัวระบุ

การเปรียบเทียบ Roblox ที่ใกล้เคียงที่สุดกับ CSS id คือตัวเลือก #[name] ซึ่งเลือกตามค่าของ Instance.Nameไม่เหมือนกับข้อกำหนดของ W3C ของคุณสมบัติ id ชื่อไม่ควรจะเป็นเอกลักษณ์

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

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

ลูอา
-- ตัวเลือกชื่ออินสแตนซ์
rule.Selector = "#ModalFrame"

-- ตั้งค่าคุณสมบัติกฎ
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.Name = "ModalFrame"

ผู้รวม

คอมบินเนเตอร์ช่วยให้คุณผสมผสานตัวเลือกพื้นฐาน เพื่อจับคู่ความสัมพันธ์ระดับลึก

เด็ก

ตัวเลือกลูกของ > เป็นเช่นเดียวกันระหว่าง CSS และ Roblox

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>

ลูอา
-- ตัวเลือกเด็ก
rule.Selector = ".MenuContainer > TextButton"

-- กำหนดคุณสมบัติกฎสําหรับลูก
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- สร้างภาชนะเมนู
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- ใช้แท็ก
CollectionService:AddTag(menuContainer, "MenuContainer")

-- สร้างปุ่ม
local button = Instance.new("TextButton")
button.Text = "Options"
-- ตั้งค่าภาชนะเมนูเป็นพ่อของปุ่ม
button.Parent = menuContainer

ลูกหลาน

ไม่เหมือนกับสัญลักษณ์พื้นที่ว่างของ CSS ตัวอย่างเช่น .menu-container button ที่เห็นที่นี่ Roblox ใช้ตัวผสาน >> เพื่อระบุความสัมพันธ์ระดับลูก

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>

ลูอา
-- ตัวเลือกลูกหลาน
rule.Selector = ".MenuContainer >> TextButton"

-- กำหนดคุณสมบัติกฎสำหรับลูกหลาน
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- สร้างภาชนะเมนู
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- ใช้แท็ก
CollectionService:AddTag(menuContainer, "MenuContainer")

-- สร้างคอนเทนเนอร์รอง
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- ตั้งค่าภาชนะเมนูเป็นพ่อของภาชนะย่อย
subContainer.Parent = menuContainer

-- สร้างปุ่ม
local button = Instance.new("TextButton")
button.Text = "Options"
-- ตั้งค่าภาชนะย่อยเป็นพ่อของปุ่ม
button.Parent = subContainer

รายการตัวเลือก

ตัวเลือกหลายตัว (รวมถึงตัวเลือกที่มีตัวคั่น) สามารถประกาศด้วยบล็อกคุณสมบัติเดียวกัน แยกกับจุลภาคโดยเว้นวรรคเพื่อลดความซ้ำซ้อน

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

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

<p>Main Menu</p>

ลูอา
-- ตัวเลือกสำหรับป้ายชื่อรูปภาพและป้ายชื่อข้อความ
rule.Selector = "ImageLabel, TextLabel"

-- ตั้งค่าคุณสมบัติร่วมสำหรับคลาส
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

-- สร้างป้ายชื่อภาพ
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui

-- สร้างฉลากข้อความ
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

คลาสตัวแทนที่

ตัวเทียบเท่า Roblox ของ CSS pseudo-class ตัวเลือกเป็น ตัวเลือกสถานะ ซึ่งตรงกับหนึ่งในสี่ Enum.GuiState ค่าเช่น Hover หรือ Press

CSS
img:hover {
	opacity: 0.5;
}

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

ลูอา
-- ตัวเลือกสถานะ
rule.Selector = "ImageLabel:Hover"

-- ตั้งค่าคุณสมบัติกฎ
rule:SetProperty("ImageTransparency", 0.5)

-- สร้างป้ายชื่อภาพ
local label = Instance.new("ImageLabel")
label.Image = "rbxassetid://104919049969988"
label.Size = UDim2.new(0, 100, 0, 100)
label.BackgroundTransparency = 1
label.Parent = screenGui

คล้ายกับวิธีที่ CSS pseudo-elements สามารถแก้ไขส่วนเฉพาะขององค์ประกอบได้ Roblox สามารถสร้าง phantom UIComponents ผ่านคุณสมบัติของกฎสไตล์ Selectorตัวอย่างเช่นกฎต่อไปนี้สร้างตัวแก้ไข ภายใต้แท็กทุก ที่มีป้ายชื่อ และตั้งค่าตัวแก้ไขแต่ละตัวเป็น พิกเซล

ลูอา
-- ตัวเลือกส่วนประกอบ UI
rule.Selector = "Frame.RoundedCorner20::UICorner"

-- ตั้งค่าคุณสมบัติกฎ
rule:SetProperty("CornerRadius", UDim.new(0, 20))

-- สร้างกรอบ
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- ใช้แท็กกับกรอบ
CollectionService:AddTag(frame, "RoundedCorner20")

ตัวแปร

CSS ช่วยให้คุณประกาศและอ้างอิง ตัวแปร ทั่วทั้งระบบสไตล์Roblox บรรลุเป้าหมายนี้ผ่านโทเค็นและระบบคุณสมบัติตัวอย่าง โดยใช้ $ เป็นคํานําหน้าคุณสามารถอ้างอิงคุณสมบัติที่ประกาศใน StyleRule หรือ StyleSheet โซ่การสืบทอดเมื่อตั้งค่าคุณสมบัติสไตล์

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>

ลูอา
-- ตั้งโทเค็นรูปแบบใช้คุณสมบัติ
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

-- ตัวเลือกคลาส
rule.Selector = "TextButton"

-- ตั้งค่าคุณสมบัติกฎ
rule:SetProperties({
	["BackgroundColor3"] = "$ButtonBgColor",
	["TextColor3"] = "$ButtonTextColor"
})

-- สร้างปุ่ม
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Main Menu"
button.Parent = screenGui

ซ้อนและรวม

การยืมแนวคิดจาก SCSS สามารถซ้อนกันได้และตัวเลือกของพวกเขาจะ รวม

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>

ลูอา
-- กฎเมนูเฟรม
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
})

-- กฎการจัดเรียงเมนู
local menuLayoutRule = Instance.new("StyleRule")
menuLayoutRule.Parent = menuFrameRule  -- ตั้งกฎเมนูเฟรมเป็นพ่อ
menuLayoutRule.Selector = "::UIListLayout"
menuLayoutRule:SetProperties({
	["FillDirection"] = Enum.FillDirection.Vertical,
	["VerticalFlex"] = Enum.UIFlexAlignment.SpaceEvenly,
	["HorizontalAlignment"] = Enum.HorizontalAlignment.Center
})

-- กฎปุ่ม
local buttonRule = Instance.new("StyleRule")
buttonRule.Parent = menuFrameRule  -- ตั้งกฎเมนูเฟรมเป็นพ่อ
buttonRule.Selector = "> TextButton"
buttonRule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- กฎการเลื่อนปุ่ม
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Parent = buttonRule  -- ตั้งกฎปุ่มเป็นพ่อของ
buttonHoverRule.Selector = ":hover"
buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)

-- สร้างกรอบพ่อแม่
local menuFrame = Instance.new("Frame")
menuFrame.Parent = screenGui
menuFrame.Name = "MenuFrame"

-- สร้างปุ่มภายในกรอบ
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