Estilo de la interfaz de usuario

*Este contenido se traduce usando la IA (Beta) y puede contener errores. Para ver esta página en inglés, haz clic en aquí.

El estilo de la interfaz de usuario es una solución de Roblox para las hojas de estilo, similar a CSS, que te permite declarar y aplicar globalmente anulaciones a las propiedades de la instancia de la interfaz de usuario.Este soporte de nivel del motor es la base para el Editor de estilo y la pipeline de tokens de extremo a extremo.

Conceptos

Las reglas de estilo (parte de un ) se aplican a cada instancia que coincida con la definición de de la regla para coincidir con características como el nombre de clase, el nombre de instancia y las relaciones de jerarquía.Vea la documentación Selector para detalles.

Estilo fichas , definidas a través de atributos de una ficha StyleSheet , representan las variables de propiedad de la interfaz que se pueden utilizar en estilos y componentes, por ejemplo, un color común para un Frame.BackgroundColor3 , TextLabel.TextColor3 y UIStroke.Color .Las fichas son comparables a las variables CSS .

Estilo temas , configurados a través de atributos de un tema StyleSheet , consisten en conjuntos de tokens específicos que se pueden intercambiar, por ejemplo, tokens de color que definen un tema "ligero" y "oscuro".Los temas relacionados deben tener el mismo conjunto de tokens para funcionar correctamente.

Propagación de reglas

Una instancia StyleLink enlaza un StyleSheet y sus reglas asociadas a un padre ScreenGui y todo el GuiObjects dentro de él.Solo un StyleSheet puede aplicarse a un árbol dado.

Definiciones de seleccionador

A un nivel alto, la coincidencia y modificación de instancias a través de la definición de Selector de una regla opera a través de:

  • Seleccionadores de clase de Roblox que se dirigen a todas las instancias de una clase determinada, por ejemplo GuiObject , Frame , ImageLabel , TextButton etc.
  • Etiquetas de instancia aplicadas a objetos de interfaz de usuario específicos a través de .
  • Selección del nombre de la instancia según el valor del objeto de la interfaz de usuario .
  • Instancia modificadores , similar a pseudo-elementos CSS , aplicados a través de fantasma UIComponents como UICorner o UIStroke .
  • GuiObject estado seleccionadores, similares a los seleccionadores de CSS pseudo-clase que corresponden a uno de los cuatro valores enumerados GuiState , como Hover .

La siguiente configuración muestra cómo los tokens de tamaño y color, un tema y un seleccionador de clase de "Frame" producen un magenta Frame de tamaño 200×200 píxeles.

Selector de clase de UI
local CollectionService = game:GetService("CollectionService")

local ReplicatedStorage = game:GetService("ReplicatedStorage")



local screenGui = script.Parent



-- Fichas

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



-- Tema A

local themeA = Instance.new("StyleSheet")

themeA.Name = "ThemeA"

themeA.Parent = ReplicatedStorage

local tokensDerive = Instance.new("StyleDerive")

tokensDerive.StyleSheet = tokens  -- Derivar tokens globales

tokensDerive.Parent = themeA

themeA:SetAttribute("FrameSize", "$SquareM")

themeA:SetAttribute("FrameColor", "$Aqua")



-- Tema B

local themeB = Instance.new("StyleSheet")

themeB.Name = "ThemeB"

themeB.Parent = ReplicatedStorage

local tokensDerive = Instance.new("StyleDerive")

tokensDerive.StyleSheet = tokens  -- Derivar tokens globales

tokensDerive.Parent = themeB

themeB:SetAttribute("FrameSize", "$SquareL")

themeB:SetAttribute("FrameColor", "$Magenta")



-- Hoja de diseño

local designSheet = Instance.new("StyleSheet")

designSheet.Name = "DesignSheet"

designSheet.Parent = ReplicatedStorage

local themeDerive = Instance.new("StyleDerive")

themeDerive.StyleSheet = themeB  -- Derivado de ThemeB

themeDerive.Parent = designSheet



-- Enlazar la hoja de diseño a ScreenGui

local styleLink = Instance.new("StyleLink")

styleLink.StyleSheet = designSheet

styleLink.Parent = screenGui



-- Configurar regla

local rule = Instance.new("StyleRule")

rule.Selector = "Frame"  -- Selector de clase

rule.Parent = designSheet



-- Establecer propiedades de regla

rule:SetProperties({

	["BackgroundColor3"] = "$FrameColor",

	["Size"] = "$FrameSize",

	["BorderSizePixel"] = 0

})



local frame = Instance.new("Frame")

frame.Parent = screenGui

Propiedades modificadas

Las propiedades de instancia afectadas por el estilo se marcan con un ⚠ en la ventana Propiedades , y pasar el mouse sobre una propiedad afectada muestra qué estilo la está influyendo.Por ejemplo, si una regla de estilo le dice a un etiquetado que use un de , la propiedad del objeto mostrará el valor predeterminado de de pero su valor real usará el valor estilizado de la regla.

Cuando un valor de propiedad predeterminado o estilizado se modifica aún más para un objeto de interfaz de usuario específico, se convierte en negrito para indicar un valor anulado.Por ejemplo — asumiendo un valor predeterminado de AnchorPoint de 0, 0  — configurar esa propiedad a 1, 1 para una instancia específica revela una anulación en negrita:

Para cualquier valor de propiedad anulado, puedes hacer clic derecho en la ventana Propiedades y seleccionar Reiniciar a la predeterminada para devolverlo al valor estilizado o al valor de propiedad predeterminado si no se ha estilizado.