UI 스타일링

props.leadIn 파일 > 베타 기능 > props.betaName props.leadOut

UI 스타일링은 CSS와 유사한 Roblox 솔루션으로, UI 인스턴스 속성에 대한 재정의를 선언하고 전역적으로 적용할 수 있습니다.이 엔진 수준 지원은 스타일 편집기 및 종단 간 토큰 파이프라인의 기초입니다.

개념

스타일 규칙(규칙의 일부)은 클래스 이름, 인스턴스 이름 및 계층 관계와 같은 특성에 일치하는 모든 인스턴스에 적용됩니다.자세한 내용은 Selector 문서를 참조하십시오.

스타일 토큰, 토큰의 특성을 통해 정의되며, 예를 들어 스타일과 구성 요소 간에 사용할 수 있는 UI 속성 변수를 나타냅니다, 예를 들어 일반적인 색상을 위한 , 및 .토큰은 CSS 변수와 비슷합니다.

스타일 테마, 테마 특성을 통해 구성되며, 예를 들어 "라이트"와 "다크" 테마를 정의하는 색상 토큰 세트로 구성됩니다.관련 테마는 올바르게 작동하려면 동일한 토큰 집합이 있어야 합니다.

규칙 전파

A StyleLink 인스턴스는 부모 StyleSheet 및 해당 규칙을 모두 연결하여 내부의 모든 ScreenGui 및 GuiObjects에 연결합니다.특정 트리에 적용할 수 있는 하나의 StyleSheet만 적용할 수 있습니다.

선택자 정의

높은 수준에서 규칙의 Selector 정의를 통해 인스턴스 일치 및 수정은 다음을 통해 작동합니다:

예를 들어, 클래스 에서 모든 인스턴스를 대상으로 하는 Roblox 클래스 GuiObject, Frame, ImageLabel, TextButton 등의 선택자.
인스턴스 태그가 CollectionService 특정 UI 개체에 적용되었습니다.
UI 개체의 값에 따라 인스턴스 이름 선택
인스턴스 모디파이어 , CSS 가상 요소와 유사하게, phantom 을 통해 적용됩니다(예: 또는 ).
상태 선택자는 CSS 가상 클래스 선택자와 유사하며, 4개의 열거형 값인 과 같은 것 중 하나에 해당합니다.

다음 설정은 크기 및 색상 토큰, 테마 및 200×200픽셀의 크기를 생성하는 클래스 선택기의 작업을 보여줍니다.

코드 동등성

UI 클래스 선택기
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local screenGui = script.Parent

-- 토크ens
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"))

-- 테마A
local themeA = Instance.new("StyleSheet")
themeA.Name = "ThemeA"
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")

-- 테마B
local themeB = Instance.new("StyleSheet")
themeB.Name = "ThemeB"
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")

-- 디자인 시트
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "DesignSheet"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB  -- ThemeB에서 파생됨
themeDerive.Parent = designSheet

-- 링크 디자인 시트를 스크린 가이에 연결
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = designSheet
styleLink.Parent = screenGui

-- 규칙 구성
local rule = Instance.new("StyleRule")
rule.Selector = "Frame"  -- 클래스 선택기
rule.Parent = designSheet

-- 규칙 속성 설정
rule:SetProperties({
	["BackgroundColor3"] = "$FrameColor",
	["Size"] = "$FrameSize",
	["BorderSizePixel"] = 0
})

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

수정된 속성

스타일링에 영향을 받는 인스턴스 속성은 속성 창( 속성 )에 ⚠ 로 표시되며, 영향을 받은 속성 위로 마우스를 이동하면 스타일이 영향을 미치는 것을 확인할 수 있습니다.예를 들어, 스타일 규칙이 태그된 에게 태그된 의 을 사용하도록 지시하면, 해당 개체 속성은 기본 값을 표시하지만 실제 는 규칙의 스타일 값을 사용합니다.

기본 또는 스타일 속성 값이 특정 UI 개체에 대해 추가로 수정되면 재정의된 값을 나타내기 위해 굵은 글꼴 이 됩니다.예를 들어 — 기본값 의 을 특정 인스턴스에 대해 으로 설정하면 볼드체로 재정의가 표시됩니다:

재정의된 속성 값에 대해서는 속성 창에서 마우스 오른쪽 버튼으로 클릭하고 기본값으로 재설정 을 선택하여 스타일된 값으로 되돌리거나 스타일링되지 않은 기본 속성 값으로 되돌립니다.

개념

규칙 전파

선택자 정의

수정된 속성

이 페이지