Controles Primitivos

Los controles primitivos son el tipo más básico de controles. Se pueden crear especificando el valor literal que deseas usar.
Así es como se crean los controles en Flipbook

Estos controles son una abreviatura de Primitive Control Object (Objeto de Control Primitivo), que es lo que UI Labs utiliza internamente.

UI Labs buscará automáticamente valores literales en tu historia y creará los valores de control por ti.
Sin embargo, también puedes crearlos manualmente, lo que a veces te permite personalizarlos aún más.

---

Tipos de valores primitivos compatibles:

• String
• Number
• Boolean
• Color3

---

Vamos a crear todos ellos utilizando valores literales:

Luau

local controls = {
   String = "Hola UI Labs!",
   Number = 10,
   Boolean = true,
   Color3 = Color3.fromRGB(255, 0, 0),
}

local story = {
   controls = controls,
   story = ...
}

return story

Roblox-TS

const controls = {
   String: "Hola UI Labs!",
   Number: 10,
   Boolean: true,
   Color3: Color3.fromRGB(255, 0, 0),
}

const story = {
   controls: controls,
   story: ...
}

export = story;

Cómo Crearlos Manualmente

Como mencionamos anteriormente, proporcionar el valor literal es una forma abreviada. También puedes crearlos manualmente utilizando los constructores disponibles en el Paquete de Utilidades.

Estos son los constructores:

Control de Tipo String

---

String(def, filters? )

Argumentos

• def: string Valor predeterminado
• filters: ArrayOpcional Una matriz de filtros que modifica el valor impuesto. Estos filtros son funciones que reciben la nueva entrada y la antigua, devolviendo una entrada filtrada. Los filtros se aplican en el orden en que aparecen en la matriz.

Control de Tipo Number

---

Number( def, min? , max? , step? , dragger? , sens? )

Argumentos

• def number Valor predeterminado
• min numberOpcional El valor mínimo aceptado    Predeterminado: -inf
• max numberOpcional El valor máximo aceptado    Predeterminado: inf
• step numberOpcional La cantidad de incremento/disminución por cada sección   Predeterminado: nil
• dragger booleanOpcional Si el control debe tener un controlador de arrastre    Predeterminado: true
• sens numberOpcional La sensibilidad del control. Si no se proporciona, se usará el argumento def   Predeterminado: def

Control de Tipo Boolean

---

Boolean(def)

Argumentos

• def boolean Valor predeterminado

Control de Tipo Color3

---

Color3(def)

Argumentos

• def Color3 Valor predeterminado

Ejemplo

Vamos a crear todos los anteriores usando los constructores:

Luau

local UILabs = require(...) -- Ubicación de tu Paquete de Utilidades
local Datatype = UILabs.Datatype

local controls = {
   String = UILabs.String("Hello UI Labs!"),
   Number = UILabs.Number(10),
   Boolean = UILabs.Boolean(true),

   -- Color3 está dentro de 'Datatype', esto es para evitar colisiones de nombres
   Color3 = Datatype.Color3(Color3.fromRGB(255, 0, 0))
}

local story = {
   controls = controls,
   story = ...
}

return story

Roblox-TS

import { Datatype, String, Number, Boolean, Color3 } from "@rbxts/ui-labs"

const controls = {
   String: String("Hello UI Labs!"),
   Number: Number(10),
   Boolean: Boolean(true),

   // Color3 está dentro de 'Datatype', esto es para evitar colisiones de nombres
   Color3: Datatype.Color3(Color3.fromRGB(255, 0, 0))
}

const story = {
   controls: controls,
   story: ...
}